DEV Community: #./TECHLAB.MA

Design Patterns: Facade

Youssef El Idrissi — Wed, 25 Feb 2026 01:45:00 +0000

(This Blog post is part of a collaborative work between Me and Mustapha El Idrissi, Consult his devTo page for more information: https://dev.to/appsbymuss)

What is the Facade Pattern

This Structural Pattern provides a simplified interface to a complex subsystem, making it easier to use by encapsulating the intricacies of the system behind a single, unified interface.

What's its purpose ?

The Facade Pattern helps in reducing the complexity of interactions with a complex system by providing a higher-level interface that abstracts away the underlying details.
It’s useful when you want to simplify communication with a subsystem, allowing clients to interact with the system in a more straightforward way without needing to understand its complexity.

Key Concepts

Facade Class: The main class that provides a simplified interface to the client. It delegates client requests to the appropriate components within the subsystem.
Subsystem Classes: The classes that represent the complex functionality of the system. These classes contain the actual implementation details and logic but are hidden from the client.

Example: Home Automation System

these are Subsystem Classes

public class LightSystem
{
    public void TurnOnLights() => Console.WriteLine("Lights are on.");
    public void TurnOffLights() => Console.WriteLine("Lights are off.");
}

public class MusicSystem
{
    public void PlayMusic() => Console.WriteLine("Playing music.");
    public void StopMusic() => Console.WriteLine("Music stopped.");
}

public class SecuritySystem
{
    public void ArmSystem() => Console.WriteLine("Security system armed.");
    public void DisarmSystem() => Console.WriteLine("Security system disarmed.");
}

This is the Facade Class

public class HomeAutomationFacade
{
    private LightSystem _lights;
    private MusicSystem _music;
    private SecuritySystem _security;

    public HomeAutomationFacade()
    {
        _lights = new LightSystem();
        _music = new MusicSystem();
        _security = new SecuritySystem();
    }

    public void LeaveHome()
    {
        _lights.TurnOffLights();
        _music.StopMusic();
        _security.ArmSystem();
        Console.WriteLine("Home is in 'leave' mode.");
    }

    public void EnterHome()
    {
        _security.DisarmSystem();
        _lights.TurnOnLights();
        _music.PlayMusic();
        Console.WriteLine("Home is in 'enter' mode.");
    }
}

And this is the Test (aka Consumer class)

public static void TestFacade()
{
    HomeAutomationFacade homeSystem = new HomeAutomationFacade();

    homeSystem.EnterHome();

    homeSystem.LeaveHome();
}

The Good, The Bad and the Ugly

Advantages

Simplifies the interface for interacting with complex subsystems, making it easier for clients to use.
Reduces dependencies between clients and subsystems, promoting loose coupling.
Encapsulates subsystem complexity, allowing for easier maintenance and understanding.

Disadvantages

The facade can become a "God Object" if it tries to handle too many responsibilities.
May hide system complexities that might be needed for advanced usage.
Over-simplifying can lead to limitations in functionality for clients needing deeper access.

When to not use

When a subsystem is simple enough that no facade is needed.
If clients require direct access to the components of a subsystem for customization or extension.
In cases where the added layer of abstraction complicates the system rather than simplifying it.

Design Patterns: Introduction

Youssef El Idrissi — Wed, 25 Feb 2026 01:34:22 +0000

(This Blog post is part of a collaborative work between Me and Mustapha El Idrissi, Consult his devTo page for more information: https://dev.to/appsbymuss)

Design patterns are proven, reusable solutions to common problems that occur during software design and development. They are like templates that can be adapted to address specific challenges within various contexts. Design patterns are not code themselves but rather descriptions of how to solve problems in a way that maximizes efficiency, scalability, and maintainability.

There is in general 3 types of design patterns:

Creational Design Patterns (such as: Singleton Pattern, Simple Factory Pattern)
Structural Design Patterns (such as: Decorator Pattern, Facade Pattern, Adapter Pattern, Proxy Pattern)
Behavioral Design Patterns (such as: Strategy Pattern, Observer Pattern)

Floating-Point Numbers

appsbymuss — Tue, 24 Feb 2026 18:58:43 +0000

(This Blog post is part of a collaborative work between Me and Youssef El Idrissi, Consult his devTo page for more information: https://dev.to/0xw3ston)

The Backstory...

Long ago Computer Engineers found themselves in a tricky pickle, they had no way to work with Numbers that are not "full-Integers" (aka Numbers that have fractions in them).

They came up with something called "Fixed-Point Numbers":

Fixed-Point Numbers

The DOT in pink is called a radix point, it's what separates the integer value from the decimal value.

Fixed-Point is about:

giving the integer side X bits in order to represent it in binary
giving the fraction side Y bits in order to represent it in binary

Here are a few examples
(In our examples we assign 4-bits for the fraction part, 4-bits for the integer part)

Examples 1 and 2 are normal since the 8 bits cover the value(s)
however, in Examples 3 and 4 you can clearly see some issues arise when it comes on how to account for negative numbers and for accuracy.

For this reason there was another standard defined, "Floating-Point Numbers":

Floating-Point Numbers

What makes Floating-Point Numbers so elegant is the direct inspiration they have drawn from Scientific notation writing. it is a formal standard (IEEE 754)

In High School, it was taught to short-write either super big or super miniscule numbers like so.

135600000 = 1,356 * 10^8
and
0,00005997758 = 5,997758 * 10^-5

with a paper and pen (it's generally) okay to write numbers both ways (as they are, or in scientific notation)
But with computers how data is stored is very critical and requires bit-level accuracy to not get the wrong results.

Single-Precision Floating Point

32-bit representation

There's multiple variations of Floating-Point Numbers, one of them is a the 32-bit representation.

Usually in all of the Floating-Point variations we find three main components:

Mantissa: This part represents the part of our number that cannot be further encoded
Exponent: That part represents the exponent by which we multiply the Mantissa to get the original number back.
Sign: this is a one bit flag that tells us if the number is negative or positive.

Encoding

To encode a number from base-10 to base-2:

We take the integer side and turn it into binary
We take the fraction/decimal side and turn it into binary
We then slide the radix point until we get a 1 on the left side
And lastly we apply the "Bias" which we will explain later.

Encoding

Integer to Binary Conversion

We do the following Calculation to turn the integer into binary

Value (Integer)	bit
124 mod 2	0
62 mod 2	0
31 mod 2	1
15 mod 2	1
7 mod 2	1
3 mod 2	1
1 mod 2	1

1111100

Fraction/Decimal to Binary Conversion

We do the following Calculation to turn the decimal into binary

Value (Fraction)	bit
0.25568 . 2 = 0.51136	0
0.51136 . 2 = 1.02272	1
0.02272 . 2 = 0.04544	0
0.04544 . 2 = 0.09088	0
0.0988 . 2 = 0.18176	0
0.18176 . 2 = 0.36352	0
0.3652 . 2 = 0.72704	0
0.72704 . 2 = 1.45408	1
0.45408 . 2 = 0.90816	0
0.90816 . 2 = 1.81632	1
0.81632 . 2 = 1.63264	1
0.63264 . 2 = 1.26528	1
0.26528 . 2 = 0.53056	0
0.53056 . 2 = 1.06112	1
...	...

.01000001011101...

So once we are done we are left with 1111100.01000001011101

We have to normalize that to get the scientific notation for this number, we would slide the radix point to the left (or the right, depending on where the left upmost "1" exists) until there is exactly one single "1" on the left side of the radix point, like so
1111100.01000001011101100 = 1.11110001000001011101100 x 2^6

Then comes the Adding Bias step, first what's a Bias ?

Bias: Bias is a fixed value added to the real exponent so the exponent can be stored as an unsigned integer. Instead of storing negative exponents directly, we store: Stored Exponent = Real exponent + Bias

for example Single-precision Floating-point uses a bias of 127

So in this case The bias is 6 + 127 which is 133 and in binary 133 = 10000101

So we're left with:

Sign: 0 (positive number)
Exponent: 10000101
Mantissa: 111100....

In normalized IEEE 754 numbers, the leading 1 (highlighted in red in the diagram below) before the radix point is implicit and therefore not stored. This is known as the hidden bit optimization.

Decoding

Decoding is fairly simple

Extract the Exponent
Remove the Bias from the exponent to get the real exponent (which is 6 in this case)
Extract the Mantissa
Reconstruct the equation mantissa x 2^exponent

which later on gives us

This way we managed to Decode the Floating Point.

Other Precision

Half-Precision Floating-Point

Used mostly in AI and Graphics

Double-Precision Floating-Point

Mostly used in Scientific Computer such as Physics Simulations, Engineering calculations & Numerical methods.

Quad-Precision Floating-Point

Used in High-Precision scientific simulations & Financial systems where the error rate should be minimized aggressively, it is present in Astrophysics, Climate modeling, Computational number theory etc..

Octuple-Precision Floating-Point

Used in Cryptography research, symbolic mathematics, experimental physics and extremely sensitive numerical algorithms

Push Notifications: How Your App Speaks When It’s Sleeping

Youssef El Idrissi — Sun, 18 May 2025 06:48:11 +0000

(This Blog post is part of a collaborative work between Me and Mustapha El Idrissi, Consult his devTo page for more information: https://dev.to/appsbymuss)

What are Push Notifications ?

Push notifications are messages sent from an app or website to a user's device, even when the app or site isn’t actively open. They appear as pop-up alerts, banners, or notification icons on devices like smartphones, tablets, and computers.

The mechanism with which these "Push Notifications" work is usually the use of some sort of background processes, these processes maintain a persistent connection with the designated "Push Server" depending on their device (in the case of Native Push) or their navigator (in the case of Web Push).

There's two types of Push Notifications:

Native Push: This one usually is linked directly to the Operating System of the Device where Push notifications were activated, for example, Windows, MacOS, Android or IOS.
Web Push: This one is linked to specific navigators instead of the OS directly, Firefox, Chrome (or any Chromium based navigator like Opera...), Firefox etc...

There is a difference between both the execution and implementation of these two types.

Web Push

Web Push is a Protocol/technology that allows websites to send push notifications to users’ devices (desktop, mobile) even when the browser is closed. It’s part of the Push API and Notifications API standards, because it's not tightly coupled with the OS, sometimes it could not work as proficiently.
On some mobile OSes, browsers may be restricted from running background processes aggressively to save battery, causing delays or missed notifications.

Native Push

The Native one works the greatest because Push Notifications are considered Top Priority by the OS, meaning that as long as the user has actual internet connection, they will 100% receive that Push notification, unless they go out of their way to tamper with the settings concerning those notifications or maybe they simply deactivate them.

Wrappers

They’re libraries or services that abstract the differences between native push services (like Apple Push Notification Service for iOS, Firebase Cloud Messaging for Android, Windows Notification Service, and Web Push for browsers) so you can send notifications without writing separate code for each platform. The issue with these "wrappers" is summarized in two things:

Due to the abstractions offered by third-party wrappers, a new problem could arise, instead of fully operating your system/mechanism, you rely on a third party service.
These "wrapper" services usually either cost money or are "fremiums" (meaning they are free for a certain amount of traffic/messages, after that it becomes paid once it passes a certain threshold)

Push Server

One of the most important components when it comes to push notifications is the "Push Server". The way it works is that we subscribe a device for a specific app/notification etc., which generates a very Unique URL, the vendor-specific server registers that this specific device "subscribed" to listen for push notifications coming on that navigator/device, the Unique URL generated gets stored in the backend so that we send a request to it, which in turns gets the actual vendor-specific server to push those notifications to those devices, So in very simple words, it's just a middleman, we don't get the right to directly push notifications from the backend to the device.

Push Notifications usually operate with a Pub/Sub Architecture

Subscribers: are the devices that want to receive notifications.
Broker: being the Push Server that mediates between the Broadcaster (Backend) and the actual subscribed clients.
Publisher(s): the backend that wants to broadcast events/messages (new discounts etc.)

There are Push Servers that handle notifications for each OS/Browser:

The Diagram above demonstrates the common Native Push Servers for each platform/browser (on the left), and it also shows how wrappers could be used to hide all that technical implementation behind abstractions that end up offering the developers very simplified API endpoints/library methods to use (on the far right)

Advantages of Push Notifications:

One of the main advantages is the ability to distribute specific messages/notifications to devices/browsers that aren’t currently open or in use.
If there are multiple Websites/apps that use the same vendor-specific server to push their notifications to devices, then a singular connection gets persisted with multiple "Publishers" but with the same "Broker" which minimizes back-and-forth Network communication, for this reason Multiplexing is used to minimize battery drain, especially on phones.

Example(s) of Use Cases:

1) An admin needs to be notified immediately when a new order is placed, even if the browser or device is idle or closed. Push notifications ensure that the admin receives timely updates regardless of the app’s active state.
2) A user needs to know when a new message is received. While real-time communication methods like WebSockets, Polling, or Server-Sent Events (SSE) work when the app is open, they fail when the window is minimized or fully closed. In such cases, push notifications become the most reliable strategy.

Setting up: WebPush

To setup WebPush on your web server, we're going to use a minimal wrapper library called "web-push" (it exists in NodeJS, Python and PHP and there are other implementations aswell).

There are 2 major sections:

1 - Backend

Now each website/API is identified with a pair of VAPID keys (Voluntary Application Server Identification), In order for our Web server to send push notifications, VAPID keys are used to authenticate the web server to the push server.

To generate the VAPID keys, we run the following instruction:

const webPush = require("web-push");

console.log(webPush.generateVAPIDKeys());


// response:
/* {
  publicKey: 'BENBPj_33ywKcH109jfokUTiS91pLbD2SmVNbUja9KBN4Ppn8HTuZNC_TKEGGsJLRzx4X02kiNA7I-7uKYnLwRM',
  privateKey: '0LLLufPFBBXYFWOymFzrrLkLFeh0GTJzZ-XKf-Ehe_w'      
} */

We set those details with this function:

webPush.setVapidDetails(
    `mailto:${process.env.PRIMARY_EMAIL_OF_MENTAINER}`,
    vapidKeys.publicKey,
    vapidKeys.privateKey
);

Now we need 2 methods.
One Method for adding the "Push Endpoints" for each app/device (aka the subscribers)
One other method is for sending the actual Push Notification.

let subscribers = [];

function setNewAdminSubscription(sub) {
    subscribers.push(sub);
    console.log("new subscription")
}

function sendAdminsNotification(message=null) {
    for (let adminSub of subscribers) {
        webPush.sendNotification(adminSub, "Test");
    }
}

2 - Frontend

Okay on the front end we have to setup 2 things.

A Service Worker, which is basically a type of process that runs in the background, it's seperated from the web page itself, so it can do background fetching, handle push notifications and other things..
A Function to Subscribe, This would accomplish two things, show an "allow notifications ?" popup to show up, and also subscribe to the designated "Push Server" (depending on which navigator is being used).
For the service worker we create a file named "sw.js" (or any other name, it doesn't matter)
This handles the push notification in a way that it shows a popup and specifies the vibration settings (if the navigator is on a phone) etc etc.. basically customizing the popup that will show up.

// sw.js
self.addEventListener('push', (e) => {
    var options = {
        body: 'This notification is a teest',
        icon: 'images/example.jpg',
        vibrate: [100, 50, 100],
        // data: {
        //     dateOfArrival: Date.now(),
        //     primaryKey: '2'
        // },
        // sticky: true,
        requireInteraction: true,
        actions: [
            {
                action: 'explore',
                title: 'Explore this new world',
                icon: 'images/checkmark.jpg'
            },
            { action: 'close', title: 'Close', icon: 'images/xmark.png' }
        ]
    };
    e.waitUntil(self.registration.showNotification('Hello World', options));
});

Now to actually register it within the website, you have to run this code in the index.js (if you're using an SPA like React), or maybe index.html (inside a |script| block)

// index.js
/* ... */

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App/>
  </StrictMode>,
)

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function (registration) {
      console.log('Service Worker Registered.');
    });
  navigator.serviceWorker.ready.then(function (registration) {
    console.log('Service Worker Ready');
  });
}

Now this would be the actual subscribe action:

async function subscribe() {
  let sw = await navigator.serviceWorker.ready;
  let push = await sw.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: '<VAPID-PUBLIC-KEY>'
  });
  await axios.post('/subscribe-push', push);
}

At this point you're basically done, all you have to do now is incorporate the "sendPushNotification" method in critical parts of your backend.

In an E-commerce website it could be a simple "new order has been created!" notification when an order has been created (on a Model/ORM/T-SQL Level) or it could be of other uses.

1) The Client makes a purchase (aka confirms an order)
2) The Web Server then logs the successful order in a Database (using an ORM or a Native DB-Adapter), then using the method we defined, the backend initializes a Push Notification to the Push Server
3) The Push Server then Pushes the notification to the Admin's Browser

The point is that you could broadcast any notification to anyone, conditional statements could be added to make sure specific notifications get sent to specific "User-Agents" and so on.

From the Market Stalls of Morocco to Building Tech Solutions for Europe

appsbymuss — Thu, 24 Apr 2025 18:48:35 +0000

I was born in Errachidia and raised in Nador, two small towns in Morocco, in a family deeply rooted in B2B distribution ; food, meat, and agricultural products through our family business, 2MP DIP Errachidia.

Summers were my earliest training ground. While other kids took vacations, I was at the local markets with my father and uncles, observing the rhythm of commerce and learning the subtle art of negotiation.

At my uncle’s office , a real-world classroom ,I developed an instinct for positioning products, understanding customer psychology, and thinking in strategies long before I opened my first marketing textbook.

From the Market to the Classroom

These formative experiences shaped my academic direction. I pursued a BTS in Technico-Commercial, followed by a professional bachelor's program in Management of Sales Forces, seeking to reinforce practical knowledge with formal training.

But in 2019, everything changed.

I discovered the world of digital marketing. I became fascinated by how websites rank, how algorithms behave, and how people interact with digital content. What started as curiosity quickly became a passion, and that passion pointed me towards technology.

Diving into Tech

I took a bold leap.

Determined to dive deeper, I joined a vocational program in Full-Stack Web Development at the Institute Specialized Technology Applied. Later, I advanced my skills through the ALX Software Engineering Program, specializing in Back-end Development. This rigorous training empowered me to build scalable digital solutions from scratch.

However, there was one major challenge: in Nador, tech jobs were limited.

Instead of waiting for opportunities, I decided to create them.

Building a Bridge to Europe

Drawing on my creative connections, particularly within the music and audiovisual arts community at Rif Records Studio, I found an unexpected bridge to the European market.

Alongside fellow software engineer Youssef El Idrissi, I co-founded the #./Techlab.MA Community: a remote collective of five multidisciplinary freelancers dedicated to delivering real-world tech solutions to startups and small businesses.

With my strong background in business, I naturally stepped into the role of Business Lead:

Managing client relations
Negotiating contracts
Building sustainable partnerships
Collaborating with our community in production

Real Clients, Real Impact

We’ve successfully collaborated with companies across Europe and Morocco, including:

Sanhaji Production and Ness Production in Belgium
lemiel.shop in France
22 Codes in Fes
Dima TV Press and Opal Multiservices in Morocco

These weren’t just freelance gigs. Each project was proof that talent, resilience, and results can come from anywhere , even a small town like Nador.

Looking Ahead: A New Chapter in Germany

Today, I’m actively preparing to pursue a Duales Studium in Wirtschaftsinformatik in Germany,a country where innovation meets precision and where theory is deeply connected to real-world practice.

Germany’s dual education system aligns perfectly with my story: I’ve always learned by doing, from markets to codebases. Wirtschaftsinformatik allows me to blend my business roots with technical skills to help companies deliver smarter, faster, and more user-centered solutions.

My goal is to become a bridge between business and development teams, making sure that customer needs, tech possibilities, and strategic priorities stay aligned.

This path offers the ideal convergence of my practical business experience and technical expertise, while immersing me in the heart of Europe’s innovation ecosystem.

For me, this isn’t just a career move, it’s a mission.

I aim to stand at the intersection of business and technology to build impactful, sustainable, and inclusive solutions. The goal is not just to succeed, but to open doors for others like me, self-taught, self-driven, and ready to make a difference.
In the long term, I see myself growing into the role of a Product Owner, then eventually a Chief Product Officer (CPO) or Chief Technology Officer (CTO) in a forward-thinking tech company ,guiding strategy, innovation, and cross-functional collaboration at the highest level.

Let’s Connect

I’m currently open to collaborations, mentorships, and career opportunities across the tech industry from startups to established companies, across all disciplines.

I’m especially interested in connecting with those working in Germany and also people works in :

#businessinformatics
#softwaredevelopment

Whether you’re a professional, student, founder, or mentor—if you’re passionate about tech and innovation, let’s connect and build the future together .

Real-Time Communication in Web

appsbymuss — Thu, 06 Feb 2025 08:27:36 +0000

(This Blog post is part of a collaborative work between Me and Youssef El Idrissi, Consult his devTo page for more information: https://dev.to/0xw3ston)

What is Real-Time Communication ?

Real-Time Communication refers to the instant exchange of data between systems, often characterized by low latency, where responses are nearly immediate. This type of communication is critical in applications like messaging, live streaming, gaming, financial trading, and collaborative tools where updates need to be reflected immediately for a seamless user experience.

Some use cases for using RT Comm. Mechanisms:

Video and Audio Streaming: RTC is essential for low-latency, real-time media streaming in applications like video conferencing, virtual events, and online broadcasting where any delay can disrupt the user experience.
Live Updates and Notifications: RTC is used to push real-time notifications and alerts to users, such as updates in social media feeds, new messages, stock price changes, or sports scores, allowing users to stay up-to-date without needing to reload the page.
Instant Messaging and Chat: RTC allows for real-time text, audio, or video messaging, which is essential for communication apps and customer support platforms. Users can see messages immediately without refreshing the app.

What ways/methods exist to achieve that ?

There are 4 common ways to implement live data updates:

Short Polling: It involves sending HTTP GET Requests every X seconds (most commonly 5 seconds) in order to fetch if there are any updates from the backend server

Long Polling: This one only sends the backend one single HTTP Request, which the backend tries to delay as much as possible for incase an Update occurs to let the user be notified of it.

SSE (Server-Sent Events): This method is Unidirectional (from Backend to Frontend), which means the Client cannot send data to the server (not using SSE's anyways).

WebSockets: this is the best choice in terms of Bidirectional communication (it allows both the client and backend to communicate with eachother), it is the most common way of implementing real time communication.

There are other ways such as WebRTC for video streaming but we won't cover that in this post.

GitHub Webhook CI/CD: Step-by-step guide

Youssef El Idrissi — Tue, 04 Feb 2025 21:33:53 +0000

(This Blog post is part of a collaborative work between Me and Mustapha El Idrissi, Consult his devTo page for more information: https://dev.to/appsbymuss)

What is CI/CD

CI/CD, or Continuous Integration and Continuous Delivery/Deployment, is a set of practices and tools that automates the process of software development, testing, and release. It helps developers deliver code changes more frequently, safely, and reliably.

Continuous Integration: This is a development practice where developers frequently integrate their code changes into a shared repository.
Continuous Delivery: This goes one step further by automating the entire release process. Once code passes all testing stages, it is automatically deployed to the production environment.

There are lot of tools that are used to perform CI and CD such as and not limited to:

Jenkins
GitHub Actions
GitLab CI/CD
Travis CI

However these tools are usually followed by resource use restrictions or require monetary contributions to be used efficiently and at the same time beginners struggle to use such tools at the start of their Software Development career.

There is however an easier-to-bootstrap and harder-to-efficiently-setup way to achieve CI/CD which is "GitHub Webhooks"

How to setup GitHub Webhook ?

Step 0: Create a repo

Ofcourse when we have a new project we have to create a new repository for it to store our code changes (aka commits), but in this case it will also be useful to achieve our CI/CD goal.

Step 1: Create a route for the POST-webhook

Assuming that you already have a server with your desired runtime environment/Framework up and running on a specific port.
You're gonna have to also make a webhook in order to let Github have a way to reach your server in the case of new change to the main/production branch on your github repo like so:

require('dotenv').config();
const express = require('express');
const crypto = require('crypto');
const bodyParser = require('body-parser');
const { exec } = require('child_process');
const app = express();

const updatedAt = new Date();

function verifySignature(req, res, buf, encoding) {
    const signature = req.headers['x-hub-signature-256']; // GitHub sends the signature here

    if (!signature) {
        console.log('No signature found on request');
        return false;
    }

    const hmac = crypto.createHmac('sha256', process.env.REPO_WEBHOOK_SECRET);
    const digest = 'sha256=' + hmac.update(buf).digest('hex');

    if (signature !== digest) {
        console.log('Signature does not match');
        return false;
    }

    console.log('Signature is valid');
    return true;
}

app.use(bodyParser.json());

app.post('/cicd/github-cicd', (req, res) => {
    const buf = JSON.stringify(req.body); // The raw body of the request
    // const isValid = verifySignature(req, res, buf);

    /* if (!isValid) {
            return res.status(401).send('Invalid signature');
    }*/

    const { ref } = req.body;
    if (ref === 'refs/heads/main') {
        // PM2 is my instance manager
        exec('git pull origin main && pm2 restart cicd_app');
    }
    res.sendStatus(200);
});

app.get('/cicd/time', (req, res) => {
    res.send(`<h1>${updatedAt}</h1>`);
});

app.listen(80, () => {
    console.log("Listening on Port 80...");
});

(Full source code)

Step 2: Configure the repo's settings

Go to [YourRepo -> Settings -> Webhooks]
Then
Then we get to the webhook creation panel
[warn] Depending on the SSL state of your website (if it's activated or not), choose the "SSL Verification" option accordingly.
[warn] Incase you want Github to include a "secret" token to authenticate itself to your server to ensure it's Github and not a threat actor, then put a secret word, otherwise leave empty.

Step 3: Ready !

After Setting up your webhook on your webserver and github webhook of your repo, then you're basically good to go.

Macro

First a developer will push their commit (code changes) to GitHub.
Secondly GitHub will send a POST Request to our server, and specifically to our webhook route with the body in JSON with information related to that github push that we've done just a moment ago.
Thirdly The server will then ofcourse treat said request as a way to know that there are changes on the production branch that must be applied as soon as possible, therefor a git pull will be attempted and then tests and new builds and whatnot are going to be executed.
Finally The server will consequently restart with the updated source code.

Vim: an epic terminal-based text editor

Youssef El Idrissi — Sat, 28 Sep 2024 06:01:59 +0000

(This Blog post is part of a collaborative work between Me and Mustapha El Idrissi, Consult his devTo page for more information: https://dev.to/appsbymuss)

Introduction about Vim

Vim (short for Vi IMproved) is a highly configurable and efficient text editor that extends the functionality of the classic Unix-based Vi editor. Created by Bram Moolenaar, Vim is designed to maximize productivity in text editing through a combination of keyboard-driven commands and modes.

What are Buffers in vim ?

In Vim, a buffer is essentially an in-memory representation of a file. When you open a file in Vim, it is loaded into a buffer, allowing you to make changes to it.

Basics of Vim

To Edit a file (or Create one)

vim <file_name>

Saving and Quitting

To save the modifications to a file: you simply press [:] then type w and press ENTER
To save the mods. and quit the file: you do the same thing except it's :wq
To quit a file and discard the mods.: press [:] and type [q!] then ENTER

There are 4 Modes in Vim

NORMAL MODE: It is the default mode. It is mostly useful for navigating through a file, however there are some shortcuts that make modifications to the file even with this mode. For example:

Pressing [0]: Places the cursor at the start of the current line.
Pressing [$]: Places the cursor at the end of the current line.
Pressing [u]: Undo's the last change that was done to the "buffer".
Pressing [x]: Deletes one character (where the cursor is).
Pressing [dd]: Deletes the current line (but it gets saved in the "paste buffer", which means the contents can be "pasted".
Pressing [p]: Pastes whatever is copied (in the "paste buffer")
Pressing [gg]: Places the cursor at the first line in the file.
Pressing [G]: Places the cursor at the last line in the file

INSERT MODE: This mode is activated by pressing [i]. It is used to insert new data to the document. Here are some examples of shortcuts:

Pressing [a + Shift]: Places the cursor at the end of the current line and activates INSERT MODE.
Pressing [i]: Activates INSERT MODE.

VISUAL MODE: This mode is useful to select specific subtext and apply modifications on it. It is activated by pressing [v]. Here are a few examples of shortcuts:

Pressing [y]: The selected section of text will be copied (not cut) and get placed in the "paste buffer" (to be pasted somewhere)
Pressing [:] then Typing [sort ui]: This will sort the selected lines alphabetically and ensure there are no duplicate lines.

COMMAND MODE: Accessed by pressing [:]. Used for entering commands such as saving files, quitting Vim, and searching.

examples:

[:! <LINUX_COMMAND>] - Execute a command while in vim

File Operations

[:q] - Close the current window/buffer.
[:w] - Write changes to the current file.
[:q!] - Close the current window/buffer and discard of the changes.
[:wq] - Write changes to the current file and close the window.
[:r <file_name>] - Copy the buffer of "file_name" and paste it in the current buffer.
[:w <file_name>] - Copy and Write the current buffer to "file_name"

String Search

[:%s/<regExpr>] - Search and highlight the first occurence of a string/pattern.
[:%s/<regExpr>/String2/g] - Search and replace ALL the occurences of a string/pattern.

Buffers

Buffers can be extremely useful when you want to edit multiple files at the same time. Using COMMAND MODE, here are some useful tricks:

[:ls] - Lists all the buffers currently accessible. (the one active has a %a sign)
[:e <file_name>] - Load a file into a new buffer.
[:b <buffer_number>] - To switch to a buffer
[:enew] - To create an empty buffer (whose content that you can later on save to a file or to another buffer)
[:bn] - Switches to the next buffer in the list.
[:bp] - Switches to the previous buffer in the list.
[:bw <buffer_number>] - Saves changes to the buffer X.
[:bd <buffer_name>] - Deletes the buffer X.
[:bd! <buffer_name>] - Deletes the buffer X discarding of any changes.

Splitting the screen

Horizentally

[:sp[lit] <file_name>] - Splits the current file with "file_name" horizentally, This step can be done multiple times with multiple files.

Vertically

[:vsp[lit] <file_name>] - Splits the current file with "file_name" horizentally, This step can be done multiple times with multiple files.
[Ctrl + ww] - To switch between "splits".

Advantages of a Terminal-based Text editor

Vim is very light resources-wise, which makes it ideal to run on low-end machines.
It is terminal-based which means it can be executed and used remotely without any trouble using something like SSH.
The learning curve to master Vim is a bit steep but everyone can master the basics quite easily after a bit of practice.

Diffie-Hellman Key Exchange (DHKE) Algorithm

Youssef El Idrissi — Sat, 31 Aug 2024 17:12:48 +0000

Introduction & History

The Diffie-Hellman Key Exchange algorithm is a fascinating method that allows two parties to securely share a secret key over an insecure communication channel (for example: over the internet). Introduced by Whitfield Diffie and Martin Hellman in 1976 and it marked a significant advancement in the field of cryptography because, prior to its development, securely exchanging keys was a major challenge, particularly in the realm of symmetric encryption.

What is the "DHKE" Algorithm?

The Diffie-Hellman Key Exchange algorithm is a type of public key cryptography that enables two parties, who may have never communicated before and are connected over an unsecured network, to establish a shared secret. This shared secret can then be used to encrypt subsequent communications using symmetric encryption algorithms (such as AES-256).

Phase I: Initialization

Two parties, typically called Alice and Bob, agree on a common set of public parameters:
- 𝑝: A large prime number, which will be used as the "modulus".
- g: a primitive root (also known as the generator) of 𝑝, which is a number that, when raised to various powers, generates all the numbers from 1 to 𝑝−1 under modulo 𝑝.

Phase II: Key Exchange

Private Key Selection:

Alice selects a private key X, which is a random integer that she keeps secret.
Bob selects a private key Y, which is also a random integer that he keeps secret.

Public Key Computation and Exchange:

Both Alice and Bob calculate their public keys respectively using the equations in the graph shown below.

Then Alice and Bob exchange their public keys (A and B over the insecure channel)

Phase III: Shared Secret Computation

Shared Secret Derivation:

The Last step is to derive the Shared Secret using the equations below

Both calculations result in the same shared secret K, which can now be used as a key for symmetric encryption to securely communicate.

Disadvantages...

Diffie-Hellman is a great algorithm but when used alone there are vulnerabilities such as, Man-in-The-Middle attack (MiTM).
It goes like the following:

In the exact moment that "Alice" and "Bob" have generated their Public Keys (A and B) and when one of them tries to share their public key with the other over an insecure network, an Attacker ("Aku" for example) intercepts that public key, only to replace it with his own calculated Public key.
The process then happens the same way for both parties (Bob and Alice).
Aku Sends his Public Key C to Bob and receives Bob's public key B.
Aku Sends his Public Key C to Alice and receives Alice's public key A.

Shared Secret Derivation gets calculated by Bob, Alice, and as for Aku, he does that calculation 2 times (one for Aku-Bob shared secret, and another for Aku-Alice shared secret)

In the end, Aku ends up seeing what both Alice and Bob send each other over the network.

Digital Certificates help against this type of Attack because it confirms that "Bob" is Bob and that "Alice" is Alice.

SSH Tunneling

appsbymuss — Sat, 31 Aug 2024 17:11:05 +0000

(This Blog post is part of a collaborative work between Me and Youssef El Idrissi, Consult his devTo page for more information: https://dev.to/0xw3ston)

What is SSH Tunneling

SSH tunneling, also known as SSH port forwarding, is a method of securely routing network traffic from one network to another through an encrypted SSH (Secure Shell) connection. This technique allows you to forward traffic for various types of network services through the SSH connection, effectively bypassing firewalls or securing communications over an untrusted network, such as the internet.
There are 3 types of SSH Tunneling: Local, Remote and Dynamic

Local Port Forwarding

This forwards traffic from a specific port on the local machine to a port on a remote machine through the SSH server. It's commonly used to access services behind a firewall or NAT that aren't directly accessible from the client machine.

Example: You have a MySQL server that is running a remote machine but you don't want to directly expose its port publicly, we can use a MySQL Client Tool (such as MySQL-Workbench) through a Local SSH Tunnel to access the DB without ever exposing said database publicly.
command to execute: ssh -L [local_port]:[remote_host]:[remote_port] [user]@[ssh_server]
example: ssh -L 3008:remote.example.com:3306 user@ssh-server.com

Remote Port Forwarding

This forwards traffic from a specific port on the SSH server to a port on a machine accessible to the client. It's used to expose a local service to the internet or a remote network.

Example: You have an Apache web server that you want to be exposed only to a single remote machine (or network) to maybe automate tests or something of the sort.
command to execute: ssh -R [remote_port]:[local_host]:[local_port] [user]@[ssh_server]
example: ssh -R 8080:localhost:80 user@ssh-server.com

Dynamic Port Forwarding

This turns the SSH client into a SOCKS proxy server, allowing it to dynamically forward traffic through the SSH server. It's useful for routing traffic from multiple applications through the SSH connection.

Example: There are geographical restrictions on some website you want to visit, therefor we use the Remote machine to act as a SOCKS Proxy and essentially forward requests to the Internet on our behalf (in this case it's HTTP Requests)
command to execute: ssh -D [local_port] [user]@[ssh_server]
example: ssh -D 1080 user@ssh-server.com