DEV Community: Alexander Maina

Integrating Web Application Firewalls (WAF) with PHP Framework

Alexander Maina — Mon, 28 Sep 2026 08:55:51 +0000

In this article, we'll walk you through how to integrate a Web Application Firewall with a PHP based web application.By the end, you will understand how to integrate a self hosted WAF to improve your application's resilience to attacks.

Learning expectations include:

Introduction
Set up Shieldon WAF on your PHP web application.
Configure it effectively to work with your PHP framework.
Set up your instructions on Shieldon control panel.
Best practices

Introduction

Web Application Frewall(WAF) is a protocol that operates at the application layer level of the Open Sytsem Interconnection (OSI) model. It acts as a security block between Hyper-Text Transfer Protocol (HTTP) requests and the internet.It protects web applications from various internet attacks like SQL injection,cookie poisoning, Cross-Site scripting (XSS) and Cross-Site Forgery. WAF is a reverse proxy protocol, which means it acts as a shield for the server where it protects it from getting exposed not until the request passes through WAF before reaching the server.This is different from a proxy server which shields the client's identity through an intermediary.

WAF works through policies which aim to protect against vulnerabilities by monitoring the traffic and filtering malicious requests. This works based on two models:

Allow List - It allows or admits requests that have been approved by the set policies in WAF.For example, if a device with IP address 192.168.0.25 is whitelisted, all requests coming from this device will be accepted.
Block List - It denies server access to requests that do not meet the set policies in WAF.For example, if a device with IP address 192.168.0.30 is blacklisted, all requests coming from this device will be rejected.

Types of WAF

Host-based WAF - integrated into the software of an application.It is cheap and easy to customize. It however consumes alot of system's resources,complex to implement and high maintenance costs.
Network- based - Usually embedded on the system hardware.It is mainly installed to minimize latency.It however is very expensive to install, require physical space for storage and maintainence of the equipments.
Cloud based - the simplest to implement and maintain.They are also very easy to implement at no extra cost. They however rely on a third party provider hence some of the features may be black boxed by the provider.This calls for the need to ensure that the provider has sufficicient customization features that meet your needs.

Setting up Shieldon on your PHP web application.

This section, we'll discuss the steps involved in installation of Shieldon, a PHP based web application firewall used to detect and block suspicious activity,often using Captcha for verification.

We will use Slim as our PHP library.

Requirements

PHP installed - Please refer here for installation guides.
Composer - refer here for installation guide.
A database application like MySQL.

Installation

Project set up

Install a slim application with the below commands on your terminal:

mkdir WAF-Project

This creates a folder for our project.

cd WAF-Project

The above command navigates to the project root folder.
WAF-Project in this case is our project name.

composer init

The command prompts you to choose your configuration for the project.Just press enter for default settings until all the prompts are done. It initializes composer on the root project and creates a composer.json file.

composer require slim/slim

The command installs slim on the project folder and lists it on composer.json.

Next,open the project on your editor.
Create a public folder at the root folder and inside it, create an index.php file.Paste the following code:

<?php
require __DIR__ . '/../vendor/autoload.php';

$app = new \Slim\App();

$app->get('/', function ($request, $response, $args) {
    return $response->write("Hello, Slim 3!");
});

$app->run();

Next, run the below command on your terminal:

php -S localhost:8080 -t public

Vist http://localhost:8080/. You should see Hello, Slim 3! which means our project set up is complete.

Configure it effectively to work with your PHP framework.

Install Shieldon

On your terminal,run the below command:

composer require shieldon/shieldon "^2"

This installs shieldon version 2.

composer install slim/csrf "^0.8"

Create a writeable folder inside the cache folder.

mkdir -p cache/shieldon_firewall
chmod 0777 cache/shieldon_firewall

This is where all sheildon files will be executed from.

On a new terminal tab,open MYSQL:

mysql -u root -p

Enter your password,then create an empty database:

create database shieldon_db;

This is the database that shieldon will use to store all configurations related to user behaviour,sessions and settings.We'll use it later in this tutorial.

Create a new folder middleware.php inside the src folder.Copy and paste the following code:

<?php

use Slim\App;
use Slim\Csrf\Guard;

return function (App $app) {
    // Shieldon Firewall middleware
    $app->add(new \Shieldon\Firewall\Integration\Slim3());

    // CSRF middleware
    $container = $app->getContainer();

    $guard = new Guard();
     // Makes tokens persistent across requests
    $guard->setPersistentTokenMode(true);

    // Configure failure handler
    $guard->setFailureCallable(function ($request, $response, $next) {
        $request = $request->withAttribute("csrf_status", false);
        return $next($request, $response);
    });

    $app->add($guard);

    // Add CSRF to container
    $container['csrf'] = function () use ($guard) {
        return $guard;
    };
};

Explanation

use Slim\App; - brings the Slim application class into scope for type hinting.

use Slim\Csrf\Guard; - brings Slim-Csrf class in to scope. It prevents the application's forms and routes from Cross Site Request Forgery (CSRF) attacks.

$app->add(new \Shieldon\Firewall\Integration\Slim3()); - it sits at the top most level,before the application logic. Any request to any routes passes through this to inspect them against attacks like XSS SQLi and bots.

$container - stores Slim’s dependency container, which can hold services like csrf, db and logger.

     // Configure failure handler
    $guard->setFailureCallable(function ($request, $response, $next) {
        $request = $request->withAttribute("csrf_status", false);
        return $next($request, $response);
    });

php
This defines what would happen if the token validation fails.
$request->withAttribute("csrf_status", false) - adds a rquest attribute csrf_status set to false.

return $next($request, $response);- continues the middleware chain rather than terminating it entirely.

$app->add($guard); - it registers Csrf Guard as a middleware for all requests.

Note:

The order of the middleware is important in that:

Shieldon conducts a security filtering first.

Csrf Guard runs second to protect against Csrf attacks.

public/index.php

In the public/index.php,copy and paste the below code:

<?php
// Error reporting configuration
error_reporting(E_ALL & ~E_DEPRECATED);
ini_set('display_errors', 1);

// Start the session
session_start();

// Ensure clean output buffer
if (ob_get_level()) ob_end_clean();

require __DIR__ . '/../vendor/autoload.php';

use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;

// Create container
$container = new \Slim\Container([
    'settings' => [
        'displayErrorDetails' => true,
        'outputBuffering' => false
    ]
]);

$app = new \Slim\App($container);

// Load middleware (Shieldon + CSRF)
(require __DIR__ . '/../src/middleware.php')($app);


// Home route

$app->get('/', function (Request $request, Response $response, $args) {
    return $response->getBody()->write("Hello, Slim 3!");
});


//Shieldon Firewall Control Panel

$app->map(['GET', 'POST'], '/firewall/panel[/{params:.*}]', function (Request $request, Response $response, array $args) use ($app) {

    $firewall = new \Shieldon\Firewall\Firewall($request);

    $firewall->configure(__DIR__ . '/../cache/shieldon_firewall');
    $firewall->controlPanel('/firewall/panel/');

    $panel = new \Shieldon\Firewall\Panel();

    // CSRF from middleware
    $csrf = $app->getContainer()->get('csrf');
    $nameKey = $csrf->getTokenNameKey();
    $valueKey = $csrf->getTokenValueKey();

    $csrfName  = $request->getAttribute($nameKey);
    $csrfValue = $request->getAttribute($valueKey);

    $panel->csrf(
        [$nameKey => $csrfName],
        [$valueKey => $csrfValue]
    );

    $panel->entry();

    return $response;
});
$app->run();

Explanation

error_reporting(E_ALL & ~E_DEPRECATED); - tells the application to show all warnings related to deprecation.

ini_set('display_errors', 1); - this shows errors related to php directly on the browser.

session_start(); - this initializes PHP sessions.They are very essential to Shiledon Firewall and Csrf Guard for login persistence,CAPTCHA and storing session data.

ob_end_clean(); - clears output buffering if there was any running process that was using it.

require __DIR__ . '/../vendor/autoload.php'; - loads all classes from Slim and Shieldon automatically for my custom middleware.

use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;

The above defines shorter aliases for PSR's message interfaces for ServerRequestInterface and ResponseInterface. Slim passes the objects that implement these interfaces to every route callback.

$container = new \Slim\Container([
    'settings' => [
        'displayErrorDetails' => true,
        'outputBuffering' => false
    ]
]);

This sets up the Slim container.'displayErrorDetails' => true tells slim to show all error traces,which is very useful especially during development.

'outputBuffering' => falsesets the content buffering to false so it does not capture echoed content automatically.

$app = new \Slim\App($container); - instantiates Slim application created with the custom configurations above.

(require __DIR__ . '/../src/middleware.php')($app); - calls the middleware in the src directory and executes it immediately by passing $app as an arguement.Calling this line activates firewall and CSRF protection globally.Remember Slim 3 had been set on the middleware which inspects all requests and filtering out malicious ones before they reach the routes. CSRF Guard was also configured in the middleware to add anti-CSRF protection tokens to all POST requests.

$app->get('/', function (Request $request, Response $response, $args) {
    return $response->getBody()->write("Hello, Slim 3!");
});

This defines a simple home route that writes Hello, Slim 3! on the browser.

$app->map(['GET', 'POST'], '/firewall/panel[/{params:.*}]', function (Request $request, Response $response, array $args) use ($app) {})

Defines /firewall/panel.which allows GET and POST methods. It uses Slim's parameter pattern [/params:.*] to handle extra other path segments.This is mostly useful because Shieldon uses routes like /firewall/panel/security/authentication and /firewall/panel/settings/basic/.

$firewall = new \Shieldon\Firewall\Firewall($request); - creates a firewall instance bound to the current PSR-7 request.The firewall intercepts requests applying routes like IP restrictions,rate limiting and CAPTCHA challenges.

$firewall->configure(__DIR__ . '/../cache/shieldon_firewall'); - sets the storage location for Shieldon's data.The directory must be writeable by PHP.

$firewall->controlPanel('/firewall/panel/'); - tells where the admin panel is accessible from on the application.

$panel = new \Shieldon\Firewall\Panel(); -initializes the UI component that renders the control panel interface(HTML templates and CAPTCHA widgets).

$csrf = $app->getContainer()->get('csrf');
$nameKey = $csrf->getTokenNameKey();
$valueKey = $csrf->getTokenValueKey();

$csrfName  = $request->getAttribute($nameKey);
$csrfValue = $request->getAttribute($valueKey);

$panel->csrf(
    [$nameKey => $csrfName],
    [$valueKey => $csrfValue]
);

On the middleware,CSRF generated session keys and values and stored them for persistence in the session. Now,they are extracted and passed into Shieldon panel using $panel -> csrf() so Shieldon will include valid Slim generated CSRF tokens on HTML forms.

$panel->entry(); renders shieldon's control panel.It is what handles internally-based routing like /overview and /login.

$app -> run()- Slim takes over the entire HTTP lifecycle.It accepts the incoming request,passes it through all registered middleware,match it to the correct route, execute the callback and send back the final response to the client.

Next, run php -S localhost:8080 -t public. Open a new browser tab and access http://localhost:8080/firewall/panel . On the login page,use shieldon_user as username and shieldon_pass as the default password.

Click login.

You should be able to access shieldon dashboard as illustrated in the snapshot below:

Set up your instructions on Shieldon control panel.

Starting daemon

Daemon is a background process that runs in shieldon to monitor application activity.It is the core process that monitors user behaviour on the web application and when to trigger such events such as IP restrictions and CAPTCHA challenges.

To start daemon:

On Shieldon dashboard, click firewall on the side bar.
Click settings and select daemon on the right tab.
On the power switch,toggle on.
On the data driver section,select MYSQL.
Fill in the required details: host: 127.0.0.1,database:shieldon_db,user:root and password: {yourdbpassword}.
Scroll down and click save.
Reload your application.
Login in again.

Setting up CAPTCHA

To set up CAPTCHA, make sure that you have php-gd installed on your system.
You can check by running the below command:

php -i | grep gd

You should see gd as the return. If nothing is returned,run the below command:

#Debian distros
sudo apt-get install php-gd

#Arch distros
sudo pacman -S php-gd

For other Unix distros,please refer here

Mac: Please refer here and choose a method that suits you best.

Windows guide

Steps

On shieldon dashboard, click firewall and navigate to settings, then CAPTCHA tab on the right tabs.
Select the type of CAPTCHA,whether reCaptcha or Image.In this case,select Image.
Toggle the enable switch on the right of the Image type.
Select the type of character combination to use for the Image.
Enter the number of characters for every CAPTCHA image.

Upon the next login,a Login page that includes a CAPTCHA challenge is rendered as shown in the snapshot below:

Rate limiting

Rate limiting is a security mechanism that puts cap on a user action on a web application within a given period of time.These actions may be trying to login to the application or refreshing. It is a control measure that can be put on web applications to limit how many requests a single user can make in a single endpoint within a given timeframe.This can be used to protect the application against Denial-of-Service attacks which are often used to overwhelm a server with a lot of requests, rendering it unavailable to other users.

Attacks that can be stopped by rate limiting.

Brute Force attacks These are attacks that mainly use trial and error actions to decode user credentials.They are often carried out by bots that target login pages.
Denial of service - It is a cyber attack where an attacker renders a service unavailable to normal user by interupting the normal device's functionality. For example, an attacker may overwhelm a server with requests unti normal traffic in unable to be processed.
Data scraping - this is a technique where a computer program extracts data from output data generated by another program.

Why rate limiting is important

It is essential to implement rate limiting mechanism to ensure that applications are protected against attacks such as brute forcing and denial of services.
Rate limiting manages resource utilization by ensuring that a server is not overloaded by many requests which poses a huge limitation in terms of performance and availability.
Rate limiting reduces delays and improves the responsiveness of a server, which is very important for real-time applications.This improves user experience.
Rate limiting reduces abusive use of a server.Users are restricted from making excessive and unnecessary requests which can greatly impact server resources and its performance.

To implement rate limiting on shieldon, create a new file called /src/rateLimitingMiddleware.php and paste the below code:

<?php
class RateLimitMiddleware
{
    private int $maxAttempts;
    private int $timeDecay;


    public function __construct(int $maxAttempts = 3, int $timeDecay = 60)
    {
        $this->maxAttempts = $maxAttempts;
        $this->timeDecay = $timeDecay;
    }


    public function __invoke($request, $response, $next)
    {
        $ip = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
        $key = 'rate_limit_' . $ip;
        $now = time();

        if (!isset($_SESSION[$key])) {
            $_SESSION[$key] = [
                'count' => 0,
                'reset' => $now + $this->timeDecay,
            ];
        }
        $record = &$_SESSION[$key];

        if ($now > $record['reset']) {
            $record['count'] = 0;
            $record['reset'] = $now + $this->timeDecay;
        }
        $record['count']++;
        if ($record['count'] > $this->maxAttempts) {
            $retryAfter = $record['reset'] - $now;

            $body = sprintf('Too many requests.Please try again after %d seconds.', $retryAfter);

            return $response
                ->withStatus(429)
                ->withHeader('Retry-After', $retryAfter)
                ->write($body);
        }
        return $next($request, $response);
    }
}

Then in /src/middleware.php, add this line below the shieldon middleware:

    $app->add(new RateLimitMiddleware(5, 60));

On the dashboard,log out and try refreshing the page continuously six times.You will reach limit and the page will return status 429 with the message Too many requests.Try again after x seconds.

Explanation

class RateLimitMiddleware
{....}

This initializes a reusable middleware class for Slim.It will intercept and modify any request and request before they reach the route controllers.

private int $maxAttempts;
private int $timeDecay;

maxAttempt defines the maximum number of requests a user can make within a window.

timeDecay defines the wait time in the window.

public function __construct(int $maxAttempts = 3, int $timeDecay = 60)
{
    $this->maxAttempts = $maxAttempts;
    $this->timeDecay = $timeDecay;
}

This is a constructor definition that tells what will be passed as arguements in the middleware.The arguements defined are maxAttempts and timeDecay.

public function __invoke($request, $response, $next)

Slim middlewares must implement __invoke() so that they can behave as callable functions.

When a request comes,Slim will execute:

$response = $middleware($request,$response,$next)

$request - PSR-7 request object.

$response - PSR-7 response object.

$next - the next callable middleware if allowed.

$ip = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
$key = 'rate_limit_' . $ip;
$now = time();

This gets the user's IP address,then creates a unique session key for their session.It also captures the current Unix timestamp.

if (!isset($_SESSION[$key])) {
    $_SESSION[$key] = [
        'count' => 0,
        'reset' => $now + $this->timeDecay,
    ];
}
$record = &$_SESSION[$key];

If this is a new user,a new session entry is created.
$count stores the number of requests made so far.$reset stores the timestamp when the rate limit resets.$record is a reference (&) so the session array can be manipulated directly.

if ($now > $record['reset']) {
    $record['count'] = 0;
    $record['reset'] = $now + $this->timeDecay;
}

If the current time exceeds the set reset time,rate limit is set to expired. A new reset counter and a new window are created.

$record['count']++;

This increments the user's request count within the current time window.

if ($record['count'] > $this->maxAttempts) {
    $retryAfter = $record['reset'] - $now;

    $body = sprintf('Too many requests. Please try again after %d seconds.', $retryAfter);

    return $response
        ->withStatus(429)
        ->withHeader('Retry-After', $retryAfter)
        ->write($body);
}

If the count exceeds the limit,the time how long until the window resets is calculated,then create a message to show to the user that they have exceeded the set request limit,then return status code 429.

Cross Site Scripting Protection (XSS)

This is a security measure that aims at protecting attackers from injecting malicious script on application urls.Attacker inject these scripts by storing them as variables which when on the webpage are executed.To counter that, it is necessary to escape and sanitize variable,a technique called perfect injection resistance.Shieldon provides developers with XSS protection which when enabled,restricts such scripts from being executed as the webpage is rendered.

To enable XSS protection:

Open shieldon control panel.
Click firewall on the sidebar.
Select XSS Protection.
Toggle the switch for every method you wish to enable XSS protection for on the left.
Restart your application.

What happens?

When you enable XSS protection, all method variables (GET,POST) and cookie variables are scanned.Common patterns used in XSS attacks are detected.These patterns may include <script>,<iframe>, event handlers like onload= and onclick=.If such patterns are detected,the request is blocked immediately and a status 403 for unauthorized is returned.In shieldon,you will be required to solve a Capture and be redirected to /.

Below is a sample snapshot of what is returned if we try to embed a script on the url.
In this tutorial,http://localhost:8000/?test=<script>alert('xss')</script> was used to test.

IP management

This is a security practice that aims to either allow or deny access to the website by their IP address.Shieldon allows application admins to block,allow or temporarily limit requests from specific IP addresses from the control panel.

Components of IP Manager

1. Whitelist (Allow)

Allows certain IP addresses to access the page regardless of the firewall rules.This avoids the scenarios of trusted users being blocked by automated rules like rate limiting and XSS detection,one way of handling false positives which do come with firewall rules.

2. Blacklist(Deny access)

It prevents malicious IP addresses from accessing the application.It aims to block known attackers ,suspicious bots or abusive users from making requests to the server. Blacklisting focuses resources on known threats which improves security management.

Implementation on Shieldon Control Panel

To enable IP management on shieldon;

Open the dashboard.
Click Firewall on the left menu bar and select IP management.
Enter hte path you wish to enable IP manager for on the right.
Enter the IP address to take action on.
On the dropdown,select the action to take,either blacklist,whitelist or remove IP.
Click submit.

Handling False Positives on Shieldon

Even though a very efficient Web Application Firewall,Shieldon misinterprets legitimate users for illegitimate users.It's built in filtering engines are designed to be strict but sometimes,real world traffic triggers them unintentionally.Shieldon allows the administrator to fine tune its features to minimize these problems.

Causes of false positives

When a legitimate request includes patterns that resemble those flagged as illegitimate payloads like SQL keywords in a form field.
A super user refreshes the page or posts data more frequently,triggering rate limits.
Automated scripts send frequent requests that resemble bots.

Below are the ways that can be implemented to handle Shieldon's False positives:

1. Whitelisting

If certain users or servers are trusted,their IP addresses can be added on the whitelist so they are never blocked.This ensures they bypass most restrictions.

2. CAPTCHA Verification

Instead of blocking suspicious user requests immediately,CAPTCHA challenges can be enabled and if solved correctly,Shieldon recognizes them as human and temporarily whitelists their session.

3. Using logs to investigate

Shieldon logs can be examined to identify whether a block was a real attack or a false alarm and take action.

Conclusion

Web Application Firewall protects the application at the application layer level and is designed to analyze every HTTP/S request before they reach the server.It acts as an intermediary between the user and the application,managing all communication before the server is reached.Shieldon ensures that only allowed actions ,based on security policy can be performed.It is therefore crucial to have a WAF like Shieldon set up to ensure that applications have automated security procedures that monitor and protect the server from malicious activity.They also ensure that application owners have complete oversight and control over their application's security environment.

Utilizing Web Workers for Background Processing in React Hooks Applications.

Alexander Maina — Wed, 24 Jul 2024 08:59:48 +0000

1.0 Introduction

Web Workers in React are functions that allow concurrent running of multiple threads in a React application.It enables some of the threads to run in the background, to exclude it from running as part of the main thread.

Take for example, you have an application where maybe you want to perform a complex calculation, large data fetching from an API or implementing a background notification, without altering the normal funtionality of the currently running main thread. This can be achieved by implementing React Web Hooks that ensure that the User Interface does not freeze while all these processes run in a React app.

In this guide, we will create a sample react project that implements web workers in custom react hooks to perform an exponential calculation.

Steps

Step 1: Create the React App

Create a react application.



npx create-vite myproject -- --template react

I prefer using vite to create a react app since it has a faster run time compared to create-react-app .
Here we use react as the template from vite.

select JavaScript:

open the project on an editor. (I'll use Vs code for this project)



code .

Step 2: Scaffolding our project.

Inside the src directory, create another directory hooks/useWebWorkers.
Inside this folder, create an index.js file that will hold our web worker as shown below:

Step 3: Creating our web worker

Inside our /hooks/useWebWorker/index.js, we create a custom hook, that creates our web worker

Create a useWebWorker custom hook that takes workerFunction and inputData as parameters.



const useWebWorker =(workerFunction,inputData)=>{

}
export default useWebWorker;

Initialize states for our result,error and status of our web worker using useState hook.



import {useState} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

}
export default useWebWorker;

i) result stores the result of our web worker. Initially set to null.

ii)error keeps track of the error that may occur in the web worker.Initially set to null.

iii) loading gives state of our web worker whether it's processing data or not.Initially set to false.

Initialize a useEffect to hold our web worker.



import {useState,useEffect} from 'react'
const useWebWorker =(workerFunction,inputData)=>{
const [result,setResult] = useState(null);
const [error,setError] = useState(null);
const [loading,setLoading] = useState(false);

useEffect(()=>{

},[inputData])

}
export default useWebWorker;

The useEffect hook runs whenever inputData changes, because it has been set as a delimiter,
When the inputData is null or undefined, the hook exits early.



if(!inputData)return;

Ensure that all the states are correctly reset



    setLoading(true);
    setError(null);
    setResult(null);

Create a web worker blob



    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction.toString()})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

Converts workerFunction to a string and includes it in a Blob object.This Blob represents the JavaScript code that will run in the Web Worker.

Create a Worker that generates a URL for the Blob and creates a new Web Worker using this URL:



    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

Set up an event handler for the message emitted by the worker.



worker.onmessage(event){

}

when the web worker sends a message to the main thread (using postMessage), the event handler is triggered.
event.data contains either valid result or error in the web worker. We handle rendering of either the error or valid results inside the if-else statements.

In case of an error, we set the error to event.data.error inside setError().
if valid results are returned, we pass the result to event.data inside the setResult()



    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      if (event.data.error) {
        setError(event.data.error);
      } else {
        setResult(event.data);
      }
      setLoading(false);
    };

Sets loading to false when done.

Handle Web worker errors:

We use worker.onerror(event){

}
We pass event as a parameter,update the error to event.message and update loading state to false.



    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

We now send the inputData to the web worker



worker.postMessage(inputData);

We terminate the Web Worker and revoke the Blob URL when the component unmounts or inputData or workerFunction changes:



    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

We finally return the state of the web worker by returning result,error and loading states:



return {result,error,loading}

Export the useWebWorker:



export default useWebWorker;

Below is the complete code for hooks/useWebWorker/index.js:



import { useState, useEffect } from "react";

const useWebWorker = (workerFunction, inputData) => {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!inputData) return;

    setLoading(true);
    setError(null);
    setResult(null);

    const blob = new Blob(
      [
        `
          self.onmessage = function(event) {
            (${workerFunction})(event);
          };
        `,
      ],
      { type: "application/javascript" }
    );

    const workerScriptUrl = URL.createObjectURL(blob);
    const worker = new Worker(workerScriptUrl);

    worker.onmessage = (event) => {
      console.log("Worker result:", event.data);
      setResult(event.data);
      setLoading(false);
    };

    worker.onerror = (event) => {
      console.error("Worker error:", event.message);
      setError(event.message);
      setLoading(false);
    };

    console.log("Posting message to worker:", inputData);
    worker.postMessage(inputData);

    return () => {
      worker.terminate();
      URL.revokeObjectURL(workerScriptUrl);
    };
  }, [inputData, workerFunction]);

  return { result, error, loading };
};

export default useWebWorker;

Step 4: Editing our App.jsx

In our App.jsx, let's define a worker function that will be executed by our web worker:



const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

e.data contains data from the web worker.

The workerFunction:
Logs the received data (base and exponent).
Computes the power of base raised to exponent.
Sends the result back to the main thread using self.postMessage(result).

Let's now define our App functional component inside our App.jsx:



const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

base: Stores the base number input.
exponent: Stores the exponent number input.
inputData: Stores the data to be sent to the worker.
Custom Hook Usage: useWebWorker is used to create a Web Worker and manage its state.



  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

handleBaseChange: Updates base state when the input value changes.
handleExponentChange: Updates exponent state when the input value changes



  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

handleCalculate Function: Converts base and exponent to numbers and sets them as inputData for the Web Worker.



  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

JSX Layout:
Displays a title and input fields for base and exponent.
A button triggers the handleCalculate function.
Conditionally renders loading, error, or result messages based on the state.

Below is the complete App.jsx code:



import { useState } from "react";
import useWebWorker from "./hooks/useWebWorker";
import "./App.css";

const workerFunction = (e) => {
  const { base, exponent } = e.data;
  console.log("Worker function received data:", base, exponent);

  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }

  self.postMessage(result);
};

const App = () => {
  const [base, setBase] = useState("");
  const [exponent, setExponent] = useState("");
  const [inputData, setInputData] = useState(null);
  const { result, error, loading } = useWebWorker(workerFunction, inputData);

  const handleBaseChange = (e) => setBase(e.target.value);
  const handleExponentChange = (e) => setExponent(e.target.value);

  const handleCalculate = () => {
    setInputData({ base: Number(base), exponent: Number(exponent) });
  };

  return (
    <div>
      <h1>Exponential Calculation with Web Worker</h1>
      <div>
        <label>
          Base:
          <input type="number" value={base} onChange={handleBaseChange} />
        </label>
      </div>
      <div>
        <label>
          Exponent:
          <input type="number" value={exponent} onChange={handleExponentChange} />
        </label>
      </div>
      <button onClick={handleCalculate}>Calculate</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      {!loading && !error && result !== null && <div>Result: {result}</div>}
    </div>
  );
};

export default App;

We can now use npm run dev to view our project.
Below is a live preview of our project:
Web Workers Project Implementation

Conclusion

Implementing Web Workers in your React applications can significantly enhance performance, especially when dealing with CPU-intensive tasks. By offloading such tasks to background threads, you ensure that your app remains responsive and provides a smooth user experience.

In our example, we've seen how straightforward it can be to set up and use Web Workers in a React environment. From dynamically creating a worker using a custom hook to managing the communication between the main thread and the worker, every step is designed to be both efficient and easy to integrate.

This approach not only helps in maintaining a responsive UI but also makes your app more robust and user-friendly. Whether it's for complex calculations, data processing, or any other heavy lifting, Web Workers can be your go-to solution for multitasking in modern web applications.

Remember, the key to a great user experience is not just about what your app does but how it feels while doing it. By implementing Web Workers, you can ensure that your app feels snappy and responsive, keeping your users happy and engaged. So, go ahead and explore the power of Web Workers in your next React project – your users will thank you for it!

Choosing Between ReactJS and VueJS: A Developer's Guide.

Alexander Maina — Thu, 02 Mar 2023 21:37:58 +0000

Hello there, Developer. I hope everything is well with you. Have you ever wondered why some developers prefer VueJs over ReactJS? Have you ever been unsure which of the two to choose while on your development journey? Are you a beginner who is unsure about where to begin learning or where to specialize? Don't be concerned. In this tutorial, I'll walk you through everything you need to know to get started. I will compare the two in a clear and precise manner, listing and explaining the similarities and differences between the two. Let's get this party started.

1.0 Brief introduction to ReactJS and VueJS.

1.1 ReactJS

React is an open source JavaScript library that is used to create user interfaces in Web development.
It was released by Facebook in the year 2013.
It is a component-based library that is used to create the view layer of web pages.
React functions by generating reusable components that represent various aspects of a user interface. Each component is responsible for rendering its own part of the UI, and React handles updating the UI efficiently as the application's data and state change over time. React also offers a simple and efficient way to manage an application's state, enabling developers to create dynamic and interactive user interfaces.

React is frequently used in conjunction with other frameworks and libraries, such as Redux for state management and React Router for client-side routing. It can be used to create web applications, mobile applications, and even desktop applications.

1.2 VueJS

VUE JS is a lightweight JavaScript Framework used for development of user interfaces.
It was released by Evan You in February 2014 as an open source project.It is developed in conjuction with HTML, CSS and Vanilla JavaScript to provide declarative and component-based user interfaces.

Vue is designed to be easily adaptible and flexible. This is usually made possible by the following:
- Static HTML enhancement without a build step
- Including them as Web Components on any page
- A One-Page Application (SPA)
- Server-Side Rendering / Fullstack (SSR)
- Static Site Generation / Jamstack (SSG)
- Desktop, mobile, WebGL and the terminal.

2.0 Overall comparison between ReactJs and VueJS.

2.1 Differences between ReactJs and VueJs.

To clearly illustrate the difference between the two, i will use table.

ReactJS	VueJS
1. React is a library.	1. Vue is a JavaScript framework.
2. Normal speed at runtime.	2. Faster speed and smoother at runtime.
3. Released in May 2013.	3. Released in February 2014.
4. Managed by Facebook.	4. Not managed by any particular company or organization. However, the development and maintenance of Vue.js are led by its creator, Evan You, and a team of core contributors.
5. Uses JSX (JavaScript XML) approach for development	5. Uses MVVM (Model-view-view-model)- a template-based approach for development.
6. Employs a virtual DOM, which is an in-memory representation of the actual DOM. When the state of a component changes, ReactJS computes the difference between the virtual and actual DOMs and updates only the parts that need to be changed.	6. Employs reactive rendering, which means that it directly manipulates the DOM to reflect changes in the state of the component.
7. ReactJS, uses CSS Modules, which allow developers to import and use CSS styles in their components without worrying about naming collisions.	7. VueJS allows developers to use scoped CSS, which means that styles defined in a component only apply to that component and its children.

2.2 Similarities between ReactJs and VueJs.

i). Virtual DOM

Both libraries make use of a virtual DOM, which is a memory-based representation of the real DOM. This enables efficient UI updates when the state of a component changes without having to re-render the entire page.

React code:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

VueJS code:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
};
</script>

ii). Component-Based Architecture:

Both ReactJS and VueJS use a component-based architecture, which divides the user interface into reusable and independent components. This simplifies the management and maintenance of large and complex applications.

*React code snippet:

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

VueJS code snippet:

<template>
  <div>
    <Header />
    <MainContent />
    <Footer />
  </div>
</template>

iii). Single-Page Applications:

ReactJS and VueJS are both well-suited for building single-page applications (SPAs), where the application runs within a single web page, providing a seamless user experience.

React code snippet:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}

VueJS code snippet:

<template>
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import HomePage from './HomePage.vue';
import AboutPage from './AboutPage.vue';
import ContactPage from './ContactPage.vue';

export default {
  components: {
    HomePage,
    AboutPage,
    ContactPage,
  },
};
</script>

iv). Development of both mobile and desktop applications.

React is a versatile front-end library that can be used to develop a wide range of web applications, including mobile and desktop applications. With the help of additional frameworks like React Native and tools like Webpack and Babel, React can be used to create native mobile and desktop applications that can run on a variety of platforms.

Similarly, Vue.js is a versatile front-end framework that can be used to develop a wide range of web applications, including mobile and desktop applications with the help of various frameworks such as Electron and other tools. These tools may include Electron.

v). Reactive and Declarative:

Both ReactJS and VueJS use a reactive and declarative approach to building user interfaces. This means that when a component's state changes, the UI is automatically updated to reflect those changes, without having to manually manipulate the DOM.

ReactJS Code Snippet:

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'John' };
  }

  render() {
    return <p>Hello, {this.state.name}!</p>;
  }
}

VueJS code snippet:

<template>
  <p>Hello, {{ name }}!</p>
</template>

<script>
export default {
  data() {
    return {
      name: 'John',
    };
  },
};
</script>

vi). Easy Integration with Other Libraries:

Both ReactJS and VueJS can easily integrate with other libraries and frameworks, allowing developers to leverage existing code and tools.

ReactJS Code Snippet:

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart } from 'chart.js';

class ChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    this.myChart = new Chart(this.canvasRef.current, {
      type: 'bar',
      data: {
        labels: this.props.labels,
        datasets: [
          {
            label: this.props.title,
            data: this.props.data,
            backgroundColor: this.props.backgroundColor,
          },
        ],
      },
    });
  }

  componentDidUpdate() {
    this.myChart.data.datasets[0].data = this.props.data;
    this.myChart.update();
  }

  render() {
    return <canvas ref={this.canvasRef} />;
  }
}

VueJS code snippet:

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import { Chart } from 'chart.js';

export default {
  props: {
    labels: Array,
    title: String,
    data: Array,
    backgroundColor: String,
  },
  mounted() {
    this.myChart = new Chart(this.$refs.canvas, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [
          {
            label: this.title,
            data: this.data,
            backgroundColor: this.backgroundColor,
          },
        ],
      },
    });
  },
  watch: {
    data(newData) {
      this.myChart.data.datasets[0].data = newData;
      this.myChart.update();
    },
  },
};
</script>

In conclusion, both ReactJS and VueJS are powerful front-end frameworks that enable developers to create dynamic and responsive user interfaces. While there are some key differences between the two, including their component syntax, state management systems, and performance characteristics, they also share many similarities such as their use of virtual DOM and support for server-side rendering.

Choosing between ReactJS and VueJS is not about which one is better, but rather which one is better for your specific use case and development team. Each framework has its strengths and weaknesses, and understanding these differences is key to making an informed decision and building great applications.

WEB SCRAPING USING PYTHON AND BEAUTIFUL SOUP.

Alexander Maina — Sun, 15 Jan 2023 15:18:07 +0000

I previously submitted a back-end developer job application to a certain website. But the website never sent me updates through email, and this scenario only sometimes presented itself. As a result, I had to access the internet daily and would continue to scroll and gaze. Until I discovered web scraping, I was unable to take advantage of an opportunity the next season.
As a result, I feel the need to share my knowledge about Python web scraping.

What is Web Scraping?

Web Scraping is a term used to refer to using a program to download and process content from the web.

Interestingly, copying and pasting the contents of the web is a basic example of web scraping.However Web scraping involves automation.

What is Beautiful Soup?

It is a Python module that parses (analyze and identify the parts of) Hyper-Text Mark-Up Language, a language in which web pages are written in.

Beautiful Soup does not come installed in python and hence it needs to be installed before initial use.

The BeautifulSoup module’s name is bs4 (for Beautiful Soup, version 4).

1.0 Installing Beautiful Soup and Requests Library.

Open the command line and type python to open the python interpreter in interactive mode.

To install Beautiful Soup, type the following command on the command line:

pip install beautifulsoup4

While beautifulsoup4 is the name used for installation, we use bs4 to import Beautiful Soup

We also need to install requests python library by typing the following command on the command line.

pip install requests

2.0 Scraping the Page

In this section, we now need to get the contents of the candidate page. We will use https://www.xyz.com as an example of our candidate page.

import requests
URL = "https://www.xyz.com"
response = requests.get(URL)

This returns the Content of the https://www.xyz.com page. This includes all elements and attributes present inside the page.

3.0 Parsing the HTML page content.

This refers to parsing this lengthy code answer using Python's help to make it more accessible and allow you to select the information you need.

We first of all need to import Beautiful soup and then create a variable to store our parsed content.

import requests
from bs4 import BeautifulSoup

URL = "https://www.xyz.com"
response = requests.get(URL)
soup = BeautifulSoup (response.content, "html.parser")

"html.parser" is a built-in Python library that parses HTML and XML documents. It creates a parse tree from the HTML content that can be used to extract information from the website.

4.0 Find element by attribute.

Take for example we need to find jobs based on a div with id = "available". We now need to scan through the entire page and find all elements with id = "available".

import requests
from bs4 import BeautifulSoup

URL = "https://www.xyz.com"
response = requests.get(URL)
soup = BeautifulSoup (page.content, "html.parser")
job = soup.find(id = "available")

This returns the list of all jobs available. Below is an example:

<div id = "available">
   <!--Job listings-->
</div>

You can also chain multiple find_all() method to make the search more specific.For example:

job = soup.find_all("p", string="Posts")

The above code will scan through the paragraphs, trying to find a string Posts. If it happens that this has been mispelt or typed with a different case, it will return no object.To rectify this, we can use lambda() function as follows;

python_job = results.find_all(
    "h2", string=lambda text: "python" in text.lower()
)

The above code will scan through all h2 in the page and convert them to lower case. It'll then find the substring 'search, and return the results.

5.0 Display the available jobs.

Now print the available jobs.

print(job.text)

You can as well use len if you need to see the number of jobs available.

print(len(job.text))

I hope that this step-by-step guide has instilled new skills in you. Happy Coding!!!

Using key-frames to create a sign-up box with changing background colors.

Alexander Maina — Mon, 24 Oct 2022 01:30:17 +0000

Howdy, developer! I believe you're doing great. In this short article, we'll look at how to use CSS keyframes to construct an HTML sign-up form with changeable background colors. I'll make an effort to be as simple and clear as I can. I hope you will like it. Now let's get started.

1.Creating the sign-up form.

We need to first of all create a sign-up form using html. Our form will be having:

Surname
First Name
Second name
Email
Password
Confirm password

Below is our Html code for the page structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up</title>
</head>
<body>
    <form>
<div class="box">
    <h1>Sign up</h1><br>

        <label>Surname:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>First name:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>Last name:<span>*</span></label>
        <input type="text" placeholder="" ><br>
        <label>Email address:</label>
        <input type="email"  placeholder="" required><br>
        <label>Password:<span>*</span></label>
        <input type="password"  placeholder="" required><br>
        <label>Confirm Password:</label>
        <input type="password"  placeholder="" required><br>
        <input type="button" value="Sign up">
<p>By clicking sign up, you agree to our <br>
        <a href="#">Terms and conditions</a> and <a href="#">privacy policy</a>
<p class="para-2">Already have an account? <a href="login.html">Log in</a></p>

</form>    
</body>
</html>

2. Styling Our Html Page.

In this section, we will now style our html page to give it a nice look.

2.1 Linking CSS to Html using external linking.

We need link our Css code to our html page by adding the link inside our html head tags as shown below:

<link rel="stylesheet" type="text/css" href="style.css"/>

Recall that this should be added inside our html head tags.

2.2 Adding Css to Html.

In this sub-section, we need to add the styling of our page as follows:


body{
    background: aqua;
}
.box{
    border-radius: 3px;
    position: relative;
    width: 350px;
    height: 850px;
    background: #abcd00;
    margin: auto;
}
span{
    color: red; 
    font-weight:bold;

}
h1{
    text-align: center;
    padding-top: 15px;
}
form label{
    display: flex;
    margin-top: 50px;
    font-size: 18px;
    margin-left: 5%;
}
form input{
    width: 75%;
    padding: 7px;
    border: none;
    border: 1px solid gray;
    border-radius: 6px;
    outline: none;
    margin-left: 5%;
}
input[type="button"]{
    width: 320;
    height: 35px;
    margin-top: 20px;
    border: none;
    background-color: #49c1a2;
    color: wheat;
    font-size: 18px;
}
p{
    text-align: center;
    padding-top: 20px;
    font-size: 15px;
}
.para-2{
    text-align: center;
    color: black;
    font-size: 15px;
    margin-top: 10px;

}
.para-2 a{
    color:#5f49c1 ;
}

2.3 Adding keyframes.

This is the section where we add keyframes to customize our sign-up box.
We will achieve this by adding keyframe properties to the sign-up block in our Css file.
With this i mean that,we will add keyframe properties inside the block of .box class in Css.

2.3.0 Adding keyframe properties.

In this sub-section,we need to introduce some properties that will be used by our keyframes. These properties include name, duration, delay and iteration function.

Note: They need to be added inside our .box properties in Css.

Here is what we will have:

    animation-name: myframe; /*Name of our key-frame animation.*/
    animation-duration: 5s;  /*How long our animations should last.*/
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; /*How our keyframe colors will loop.*/
    animation-play-state: running;
    animation-direction: alternate-reverse;
    animation-delay: 0s;  /*How long it will take before our animation is triggered.*/

##2.2.1 Adding Css to keyframe animations.
The basic syntax for CSS keyframes is:

@keyframes animationname{keyframesselector{css-styles;}}

For our case, we will add the following lines of code:

@keyframes myframe{
    50%{
        background: red;
    }
    100%{
        background: skyblue;
    }
}

I changed the backdrop color to a different color at 50% of the animation. This indicates that the backdrop color will start to switch from aqua (its initial value) to red;another when the animation nears its halfway point.

I've set a new color;skyblue to appear at 100%, the point where the animation ends, so that as it gets closer to that point, it will start to transition to that color.

That is how we create varying background colors using keyframes. I believe you have enjoyed.✌️
Thank you.