DEV Community: chinedu

Building Production-Ready Multi-Tenant SaaS in Rust with Actix-web

chinedu — Sun, 22 Mar 2026 21:54:58 +0000

How I built tenant isolation for SmartFarmAI a poultry farm management platform serving farms across Nigeria and Tanzania.

I've been building SmartFarmAI, an AI-powered poultry farm management platform, and one of the hardest architectural decisions I had to make early on was: how do I safely isolate data between farms?

When a farmer in Lagos logs in and checks their egg production numbers, they should never under any circumstance see data from a 60,000-bird enterprise operation in Tanzania. One bug, one missed WHERE clause, and you're leaking customer data. In agriculture, that's not just a privacy issue it's a business-ending trust violation.

This article walks through exactly how I solved this using Rust, Actix-web, and PostgreSQL Row-Level Security (RLS) the patterns, the gotchas I hit in production, and the code that keeps it all safe.

If you're building any kind of multi-tenant SaaS in Rust, this should save you weeks of trial and error.

The pattern in a nutshell: Actix middleware extracts the tenant from each request, starts a DB transaction, calls SET LOCAL app.current_tenant_id, and lets Postgres RLS policies automatically scope every query no manual WHERE org_id = $1 needed.

This article assumes you're comfortable with Rust basics, Actix-web routing, and have at least heard of PostgreSQL Row-Level Security. If you've never touched RLS before, you'll still be able to follow along I introduce the concepts as we go.

Multi-Tenancy: Pick Your Strategy

Before writing any code, you have to decide how to isolate tenant data. There are three common approaches:

Database-per-tenant: Every customer gets their own PostgreSQL database. Maximum isolation, but a nightmare to manage at scale. Migrations become a coordinated rollout across hundreds of databases.

Schema-per-tenant: One database, but each customer gets their own schema. Better than separate databases, but schema migrations are still painful and connection pooling gets complicated fast.

Shared database with Row-Level Security: One database, one schema, one set of tables but PostgreSQL itself enforces which rows each tenant can see. This is what I chose for SmartFarmAI.

Why RLS? Because it pushes security enforcement down to the database layer. My application code doesn't need to remember to add WHERE org_id = $1 to every query. PostgreSQL does it automatically. If I forget a filter in my Rust code? Doesn't matter the database won't return rows that don't belong to the current tenant.

For an early-stage SaaS serving poultry farmers, this gives me the isolation guarantees I need without the operational overhead of managing hundreds of databases.

The Data Model: org_id Everywhere

SmartFarmAI's domain hierarchy looks like this:

Organization (tenant)
  └── Farm(s)
       └── Batch(es) / Pen House(s)
            └── Egg Records, Mortality Logs, Vaccination Schedules...

The key decision: every table carries org_id, even child tables. You might think "batches already belong to a farm, and farms belong to an org why duplicate org_id on the batch table?" Two reasons:

RLS policies need a direct column reference. PostgreSQL can't follow foreign key chains in a policy expression. The policy needs to see org_id on the row it's evaluating.
Composite foreign keys enforce correctness. A batch doesn't just reference a farm_id it references (org_id, farm_id). This makes it structurally impossible to accidentally associate a batch with a farm from a different organization.

Here's what the schema looks like:

-- Organizations (tenants)
CREATE TABLE organizations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name TEXT NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Farms belong to an organization
CREATE TABLE farms (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL REFERENCES organizations(id),
    name TEXT NOT NULL,
    location TEXT,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    -- Composite unique for child FK references
    UNIQUE (org_id, id)
);

-- Batches belong to a farm, scoped by org
CREATE TABLE batches (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL,
    farm_id UUID NOT NULL,
    batch_name TEXT NOT NULL,
    bird_count INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    -- Composite FK: can't assign a batch to a farm in a different org
    CONSTRAINT batch_farm_fk
        FOREIGN KEY (org_id, farm_id)
        REFERENCES farms (org_id, id)
        ON DELETE CASCADE,

    UNIQUE (org_id, farm_id, id)
);

-- Egg production records
CREATE TABLE egg_production_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL,
    farm_id UUID NOT NULL,
    batch_id UUID NOT NULL,
    record_date DATE NOT NULL DEFAULT CURRENT_DATE,
    eggs_collected INTEGER NOT NULL CHECK (eggs_collected >= 0),
    notes TEXT,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    CONSTRAINT egg_log_batch_fk
        FOREIGN KEY (org_id, farm_id, batch_id)
        REFERENCES batches (org_id, farm_id, id)
        ON DELETE CASCADE,

    -- One record per batch per day
    CONSTRAINT unique_egg_record UNIQUE (batch_id, record_date)
);

Notice the pattern: every child table has a composite foreign key that threads org_id all the way down. This is intentional. It's one of those things that feels redundant until it saves you from a data leak.

Enabling Row-Level Security

With the schema in place, enabling RLS is straightforward:

-- Enable RLS on all tenant-scoped tables
ALTER TABLE farms ENABLE ROW LEVEL SECURITY;
ALTER TABLE batches ENABLE ROW LEVEL SECURITY;
ALTER TABLE egg_production_logs ENABLE ROW LEVEL SECURITY;

-- Create isolation policies
CREATE POLICY tenant_isolation ON farms
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_isolation ON batches
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_isolation ON egg_production_logs
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

-- WITH CHECK ensures inserts/updates also respect the tenant boundary
CREATE POLICY tenant_write_isolation ON farms
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_write_isolation ON batches
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_write_isolation ON egg_production_logs
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

The magic here is current_setting('app.current_tenant_id'). This is a PostgreSQL session variable not a table, not a function, just a key-value pair that lives for the duration of a transaction or session. Before any query runs, we set this variable to the current user's organization ID. PostgreSQL's RLS engine then uses it to filter every SELECT, INSERT, UPDATE, and DELETE.

Important: RLS policies are enforced for regular users but not for the table owner or superusers. Make sure your application connects as a non-superuser role.

The Middleware: Setting Tenant Context in Actix-web

This is where Rust and Actix-web come in. Every authenticated request needs to:

Extract the tenant ID (from JWT claims)
Set the PostgreSQL session variable before any query runs
Ensure the variable is cleared when the request ends

Here's how I built it:

The TenantId Extractor

First, a newtype for tenant IDs. This prevents accidentally passing a user ID where an org ID is expected Rust's type system catches it at compile time.

use uuid::Uuid;

#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub struct TenantId(Uuid);

impl TenantId {
    pub fn new(id: Uuid) -> Self {
        Self(id)
    }

    pub fn as_uuid(&self) -> &Uuid {
        &self.0
    }
}

impl std::fmt::Display for TenantId {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        write!(f, "{}", self.0)
    }
}

Extracting Tenant from JWT

In Actix-web, you can implement FromRequest to automatically extract the tenant ID from the JWT on every request:

use actix_web::{FromRequest, HttpRequest, dev::Payload, Error, HttpMessage};
use std::future::{Ready, ready};

impl FromRequest for TenantId {
    type Error = Error;
    type Future = Ready<Result<Self, Self::Error>>;

    fn from_request(req: &HttpRequest, _payload: &mut Payload) -> Self::Future {
        // The auth middleware has already validated the JWT
        // and inserted claims into request extensions
        match req.extensions().get::<AuthClaims>() {
            Some(claims) => ready(Ok(TenantId::new(claims.org_id))),
            None => ready(Err(actix_web::error::ErrorUnauthorized(
                "Missing tenant context"
            ))),
        }
    }
}

The RLS Middleware

Now the critical piece the middleware that sets app.current_tenant_id before your handler runs:

use actix_web::{dev::ServiceRequest, Error, HttpMessage};
use sqlx::PgPool;

pub async fn set_rls_context(
    pool: &PgPool,
    org_id: &TenantId,
) -> Result<sqlx::Transaction<'_, sqlx::Postgres>, Error> {
    let mut tx = pool.begin().await.map_err(|e| {
        actix_web::error::ErrorInternalServerError(format!("DB error: {}", e))
    })?;

    // SET LOCAL scopes the variable to this transaction only
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_id.to_string())
        .execute(&mut *tx)
        .await
        .map_err(|e| {
            actix_web::error::ErrorInternalServerError(format!("RLS context error: {}", e))
        })?;

    Ok(tx)
}

The critical detail here is the third argument to set_config: true means transaction-local. When the transaction commits or rolls back, the variable is automatically cleared. This is essential for connection pool safety more on that below.

Using It in Handlers

With the extractor and the RLS context function, your route handlers look clean:

use actix_web::{web, HttpResponse, Result};
use sqlx::PgPool;

pub async fn get_farms(
    pool: web::Data<PgPool>,
    tenant: TenantId,
) -> Result<HttpResponse> {
    let mut tx = set_rls_context(&pool, &tenant).await?;

    // No WHERE clause needed — RLS handles filtering
    let farms = sqlx::query_as!(
        Farm,
        "SELECT id, org_id, name, location, created_at FROM farms"
    )
    .fetch_all(&mut *tx)
    .await
    .map_err(actix_web::error::ErrorInternalServerError)?;

    tx.commit().await
        .map_err(actix_web::error::ErrorInternalServerError)?;

    Ok(HttpResponse::Ok().json(farms))
}

Notice: no WHERE org_id = $1. The query selects all farms, but RLS ensures the farmer in Lagos only sees their own farms. The 60,000-bird operation in Tanzania is invisible to them at the database level.

The Gotcha That Almost Burned Me: Connection Pools and Session Variables

Here's the mistake that will bite you if you're not careful.

PostgreSQL session variables persist for the lifetime of a connection. When you use a connection pool (like sqlx's PgPool), connections are reused across requests. If you set app.current_tenant_id with session scope (false as the third argument to set_config), here's what happens:

1. Request from Org-A arrives
2. Connection #5 is checked out from the pool
3. SET app.current_tenant_id = 'org-a-uuid'  (session-scoped)
4. Query runs, returns Org-A's data ✅
5. Connection #5 is returned to the pool

6. Request from Org-B arrives
7. Connection #5 is checked out again
8. But app.current_tenant_id is STILL 'org-a-uuid' !!
9. Query runs... returns Org-A's data to Org-B's user 🚨

This is a data leak. And it's subtle it depends on which connection the pool hands out, so it won't happen consistently in development. It'll show up in production under load.

The fix: always use transaction-local scope.

// ✅ SAFE: Transaction-local — cleared automatically when tx ends
sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
    .bind(org_id.to_string())
    .execute(&mut *tx)
    .await?;

// ❌ DANGEROUS: Session-local — persists after connection returns to pool
sqlx::query("SELECT set_config('app.current_tenant_id', $1, false)")
    .bind(org_id.to_string())
    .execute(&pool)
    .await?;

By wrapping every tenant-scoped operation in a transaction and using set_config(..., true), the variable is automatically cleaned up when the transaction ends. No stale tenant context, no data leaks.

When NOT to Use RLS: Background Workers and the Outbox Pattern

SmartFarmAI uses an outbox pattern for event-driven processing. When a farmer logs egg production, the API handler inserts the record and publishes a domain event to an outbox_events table all in the same transaction. A background worker then picks up events and processes them (updating batch totals, triggering AI predictions, etc.).

Here's the thing: the outbox table should NOT have RLS enabled.

Why? The background worker needs to poll for events across all organizations:

SELECT * FROM outbox_events
WHERE processed_at IS NULL
ORDER BY created_at ASC
LIMIT 10
FOR UPDATE SKIP LOCKED;

If RLS were enabled on this table, the worker would need a tenant context to read events but it doesn't belong to any tenant. It's infrastructure.

My rule of thumb:

Table Type	RLS?	Why
Business data (farms, batches, eggs)	Yes	Tenant-scoped, must be isolated
Work queues (outbox_events, email_jobs)	No	Infrastructure, cross-tenant by design
Audit logs	Depends	RLS if tenant-facing, no RLS if admin-only

But here's the nuance: when the worker processes an event and needs to update business data, it does need to set the RLS context for that specific event's organization:

pub async fn process_event(
    &self,
    pool: &PgPool,
    event: &OutboxEvent,
) -> Result<(), Box<dyn std::error::Error>> {
    let mut tx = pool.begin().await?;

    // Set RLS context for this event's organization
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(event.org_id.to_string())
        .execute(&mut *tx)
        .await?;

    // Now we can safely update tenant-scoped tables
    match event.topic.as_str() {
        "EggProductionRecorded" => {
            self.update_batch_totals(&mut tx, event).await?;
        }
        "MortalityRecorded" => {
            self.update_mortality_stats(&mut tx, event).await?;
        }
        _ => {}
    }

    // Mark event as processed
    sqlx::query!(
        "UPDATE outbox_events SET processed_at = NOW() WHERE id = $1",
        event.id
    )
    .execute(&mut *tx)
    .await?;

    tx.commit().await?;
    Ok(())
}

This is the pattern that took me the longest to get right. The worker reads from an unprotected queue, then enters a tenant context per-event to do the actual work. Each event is processed in its own transaction with its own RLS scope.

I actually hit a bug in production where my outbox table initially had RLS enabled. The worker was fetching zero events even though the table had hundreds queued up. No errors just silent filtering. It took me an embarrassing amount of debugging before I realised the worker had no tenant context set, so RLS was filtering out everything.

Testing Multi-Tenant Isolation

Testing RLS requires more thought than testing regular business logic. You need to verify that tenants genuinely can't see each other's data:

#[tokio::test]
async fn test_tenant_isolation() {
    let pool = setup_test_db().await;

    // Create two organizations
    let org_a = create_test_org(&pool, "Farm Corp A").await;
    let org_b = create_test_org(&pool, "Farm Corp B").await;

    // Create farms under each org (using superuser/direct insert)
    create_test_farm(&pool, &org_a, "Org A Farm").await;
    create_test_farm(&pool, &org_b, "Org B Farm").await;

    // Query as Org A — should only see their farm
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_a.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    let farms: Vec<Farm> = sqlx::query_as!(Farm, "SELECT * FROM farms")
        .fetch_all(&mut *tx)
        .await
        .unwrap();

    assert_eq!(farms.len(), 1);
    assert_eq!(farms[0].name, "Org A Farm");

    tx.commit().await.unwrap();

    // Query as Org B — should only see their farm
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_b.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    let farms: Vec<Farm> = sqlx::query_as!(Farm, "SELECT * FROM farms")
        .fetch_all(&mut *tx)
        .await
        .unwrap();

    assert_eq!(farms.len(), 1);
    assert_eq!(farms[0].name, "Org B Farm");

    tx.commit().await.unwrap();
}

#[tokio::test]
async fn test_cross_tenant_insert_blocked() {
    let pool = setup_test_db().await;

    let org_a = create_test_org(&pool, "Org A").await;
    let org_b = create_test_org(&pool, "Org B").await;

    // Set context as Org A, but try to insert with Org B's ID
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_a.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    // This should be rejected by the WITH CHECK policy
    let result = sqlx::query!(
        "INSERT INTO farms (org_id, name) VALUES ($1, $2)",
        org_b.as_uuid(),  // Wrong org!
        "Sneaky Farm"
    )
    .execute(&mut *tx)
    .await;

    assert!(result.is_err()); // RLS blocks it
}

These tests are non-negotiable. Run them in CI. They're the safety net that catches regressions before your farmers do.

Production Lessons from SmartFarmAI

After running this architecture in production with farms across Nigeria and Tanzania, here's what I've learned:

1. RLS has near-zero performance overhead. PostgreSQL evaluates the policy as part of query planning. For simple equality checks like org_id = current_setting(...)::uuid, the optimiser handles it efficiently. I haven't needed to do anything special for performance.

2. Always index org_id. Even though RLS handles filtering, the database still needs to efficiently find matching rows. Composite indexes on (org_id, ...) are essential:

CREATE INDEX idx_farms_org ON farms(org_id);
CREATE INDEX idx_batches_org_farm ON batches(org_id, farm_id);
CREATE INDEX idx_egg_logs_batch_date ON egg_production_logs(batch_id, record_date DESC);

3. Migrations need care. When you run migrations, you're typically using a superuser or the table owner which bypasses RLS. This is fine and expected, but be aware of it. Don't write migration scripts that assume RLS is filtering data.

4. Debug with current_setting(). When something seems off, check what the database thinks the current tenant is:

SELECT current_setting('app.current_tenant_id', true);
-- Returns NULL if not set, the tenant UUID if set

The second argument (true) tells PostgreSQL to return NULL instead of throwing an error if the variable isn't set. Extremely useful for debugging.

5. The outbox worker issue is real. As I mentioned earlier if you enable RLS on infrastructure tables, your background workers will silently return zero results. No errors, no warnings. Set up monitoring for your outbox queue depth so you catch this fast.

Wrapping Up

Multi-tenant data isolation isn't the kind of thing you want to get "mostly right." It needs to be airtight. PostgreSQL's Row-Level Security, combined with Rust's type system and Actix-web's middleware patterns, gives you defense in depth:

Database layer: RLS policies enforce isolation regardless of application bugs.
Application layer: Transaction-scoped SET LOCAL prevents connection pool contamination.

SmartFarmAI currently manages farms ranging from 550 birds to 60,000 birds. Every single one of them shares the same database, the same tables, the same application code. And none of them can see each other's data.

If you're building multi-tenant SaaS in Rust, start with RLS. Push security as far down the stack as it will go. And let Rust's type system catch everything else.

I'm Chinedu Okere I write about building production systems in Rust. If you're working on multi-tenant architecture or SaaS in Rust, I'd love to hear about your approach. Find me on Twitter/X or check out SmartFarmAI.

Big(O) Notation summarized!

chinedu — Sat, 26 Jun 2021 18:06:49 +0000

Big(O) is the way in which we compare algorithmic complexities of two programs in a standard manner

Big(O) is an algorithmic complexity metric, which defines the relationship between the number of input and the steps taken by the algorithm to process those inputs.

In summary big(O) measure, the amount of work a program has to do as the input scales. Big(O) in other can be used to define both time and space complexities

Table of Big(O) starting from best case scenarios to worst case scenarios.

HOW TO CALCULATE TIME COMPLEXITY USING BIG(O)

CONSTANT COMPLEXITY O(1)

In a constant complexity, the steps taken to complete the execution of a program is always the same regardless of the size of its input.

An execution would be getting an element at a certain position in an array(like getting the alphabet D at the index of 3 in the array).

The above takes just one step to complete. The above example, the getAlphabetAt method gets a particular element at a constant position in an array.

No matter how many Alphabet there are in the array the getAlphabetAt method always performs two steps.

First, get the element at a certain position.
Second, console.logs() the result to the console.

Hence, we can say. The complexity is constant as it doesn’t scale with the input.

LINEAR COMPLEXITIES O(N)

In algorithms with linear complexity a single unit increase in the input causes a unit increase in the steps required to complete the program execution.

An example would be calculating power of every element in an array.

This would be linear because as the array grows it would do one unit more of more of that element.

The above method getCubicValues() will take 3 steps to complete.

So, for each of them in the array passed as a params to getCubicValues() method, the method finds the cube of each of the item in the array and then logs it to the console.

Functions with linear complexity is represented by straight-line graphs increase in position directions.

QUADRATIC COMPLEXITY

In an algorithm with quadratic complexity, the output steps increase quadratically with the increase in the inputs.

In the above graphical example, the getProductValue method multiplies each element in that array with other elements.

There are two loops, where the outer loop it rates through each item, and for each of the item in the outer loop, and the inner loop also iterates over each item.

This makes the number of steps to be N*N where N is the number of elements in the array

BIG(O) NOTATION FOR SPACE COMPLEXITY

In other to get the space complexity, we calculate the amount of space needed by the algorithms for the input element.

BEST VS WORST CASE SCENERIOS IN COMPLEXITIES

There are two types of complexities

Best case scenarios
Worst case scenarios

BEST CASE SCENARIOS

This is the complexity of an algorithm in an ideal situation.

An example would be, let’s say we want to search for an item A in an array of N items.

In the best-case scenarios, it would be that we found the item at the fist index in which we can say the complexity would be an O(1).

WORST CASE SCENARIOS

In the worst case, lets assume we find the item at the nth index (last) in this case we can say the complexity would be an O(N) where N is the total number of items in the array.

In summary, and to round it all up, Algorithmic complexities are used as a tool to measure the performance of an algorithm in terms of time taken and space used.

Thank you for sticking with me through this. You Rock.

If you enjoyed pls follow me on Twitter and Instagram , if there are any improvements or code errors do let me know in the comment section below or send a dm.

Thanks once again and bye for now. Much Love❤❤❤.

JavaScript: How to implement a dictionary/map in 3mins.

chinedu — Mon, 18 Jan 2021 07:54:19 +0000

Wait before you scream…. lol.

We do know that JavaScript isn’t a statically typed language.

So how in the world can we implement dictionaries with it.

Well, stick with me champ! Because you are about to find out.

Up until ES6 when maps were created. JavaScript had no native support for dictionaries.

But there was a flexible way of implementing a dictionary using the JavaScript object.

This may sound funny to people coming from other statically typed languages, but this is true and its because JavaScript gives us flexible ways to use objects because it’s a dynamically typed language.

Introduction

What is a Dictionary?

A dictionary can also be called a map in JavaScript, and maps/dictionaries are used to store unique elements of key-value pairs.

They are similar to the set data structure only that the set data structure stores a unique element of value value pairs.

Thanks to es6(ECMAScript 6) JavaScript now has an implementation of a map which could also be interchangeably called dictionaries.

Let’s implement a map/dictionary shall we?

If you are a constant reader of mine, you’d know that we as always implement the skeletal structure of our class so as to keep us on track and guide.

class dictionaryOrMap {
    constructor(){
        this.element = {}
    }

    //methods go here
    has(key)
    set(key, value)
    remove(key)
    get(key)
    clear()
    size()
    keys()
    values()
}

Taking a look at our class constructor property, we see that we are going to be storing our element in a JavaScript object.

This is unlike the stacks and queues where we used an array.

Let’s start implementing each methods of our dictionary class.

has

The has method returns true if the key exists and false if the key does not.

The has method is a utility method that will play a vital role in helping us implement the methods of our dictionary/map class.

To implement this function, we use the for…in loop to iterate all the properties of our objects.

To understand and dive deeper into how the for..in loop works checkout the Mozilla Doc.

has(key){
    return key in this.element
}

So, what the has method does for us is to verify if we truly have the key as a property in our object.

set

This method adds a new element to the dictionary.

The set method receives a key-value parameter.

Then we use our passed in value and set it to the key of our element object.

set(key, value){
    return this.element[key] = value
}

As simple as that.

delete

This method uses the key to remove a value from the dictionary.

To implement this method, we first have to search for the key.

Then we use JavaScript’s delete property or method to remove the key attribute from our element object.

In a case where we delete, we want to return true but, in a case, where we don’t, we want to return false.

delete(key){
    if(this.has(key)){
        delete this.element[key]
        return true
    }
    return false
}

*get *

The get method helps us to return a specific value by the key we passed into our method.

get(key){
    if(this.has(key)){
        return this.element[key]
    } else {
        return undefined
}

values

The values method returns all our values in the element object of our dictionary in an array.

There are two ways of implement this method we would see the both of them in this section.

The first method

First off, we want to loop through all the elements in our object, this tells us that we actually have values in our dictionary.

Then we would employ the has method once again to verify the keys.

If they do not exist then we push them into the array and return all the values.

Note: we verify the keys because the object prototype contains additional properties of its own.

values(){
    let values = []
    for(let k in this.element){
        if(this.has(k)){
            values.push(this.element[k])
        }
    }
    return values
}

The second method

For the second method we use Object.values to get all the values of our dictionary.

values(){
    return Object.values(this.element)
}

Which method do you prefer? Let me know in the comments 😉😉😉😉.

key

This method returns the array of all the keys in our dictionary.

In other to achieve this we use the Object.keys, and passing in our object’s element as a parameter.

Key(){
    return Object.keys(this.element)
}

size

This gives us the number of elements that are contained in our dictionary, this is similar to the length property of an array.

size(){
    return Object.keys(this.element).length
}

clear

This method removes all the elements from the dictionary just like its name sounds.

clear(){
    return this.element = {}
}

With this, we have completely implemented or dictionary.

Dictionary or maps should be used whenever we are trying to solve a problem that has to be unique(element) and needs to be in a key-value pair format.

Let’s Test out our Dictionary

First, we instantiate our class

let map = new dictionaryOrMaps()

Let’s test the set method

map.set("Vivian", "African")
map.set("Shalom", "Hispanics")
map.set("Gideon", "Caucasian")

Let’s test the has method

//The result should be true
console.log(map.has("Vivian"))

Let’s test our size method

//The result should be 3
console.log(map.size())

Let’s test our keys method

//Result => ["Vivian", "Shalom", "Gideon"]
console.log(map.keys())

Let’s test our values method

//Result => ["African", "Hispanics", "Caucasian"]
console.log(map values())

Let’s test the get method

//Result => ["African"]
console.log(map.get("Vivian"))

Let’s test the remove method

console.log(map.remove("Vivian"))

Finally, let's test to see if the key and its value were removed and if the size was reduced too.

//Results
//["shalom", "Gideon"]
//["Hispanics", "Caucasian"]
//2

console.log(map.keys())
console.log(map.values())
console.log(map.size())

Hey you, yes you champ! Thanks for hanging in with me till the very last moment.

If you enjoyed pls follow me on Twitter and Instagram, if there are any improvements or code errors do let me know in the comment section below or a dm.

Thanks once again and bye for now. Much Love❤❤❤.

What is a TCP?

chinedu — Fri, 15 Jan 2021 03:06:48 +0000

Introduction

I decided to write about something a little bit fun something that’s not data structures and algorithms, guys pls if you find value in this and love this sort of content do let me know.

Today we are going to talk about TCP this would be an overview from a software engineering perspective.

Let’s go…

What’s is TCP?

TCP stands for (transmission control protocol).

TCP and UDP are both layer 4(Transport Layer) protocols of the OSI Model.

TCP allows for transmission of information in both directions. This means that computer systems that communicate over TCP can send and receive data at the same time making use of the IP address and port

TCP is used in a lot of applications example: databases, secure chatting apps, etc.

Let’s see some examples of TCP in real-life…

HTTP (world wide web)
SSH (Secure Shell)
E-mail (SMTP TCP)
File Transfer Protocol (FTP)

Why is TCP used

TCP was created so that it would be a reliable, and straightforward way to pass data around without ending up with a scrambled or lost data, this way software engineers do not need to write code to handle this situation. Thereby allowing them to focus on application logic.

Let’s look at some characteristics Advantages of TCP.

Acknowledgment/Confirmation

Let’s use an example to explain this. Due to the unreliability of the internet, a lot of things can happen to data on transit from client to server.

We need some sort of confirmation that the data we have sent has gotten to its destination.

TCP is able to do this by attaching additional information to the data that’s being sent.
If our client doesn’t receive this confirmation it doesn’t accept the data.

Retransmission

In a situation where our client did not receive a confirmation from the server the TCP (transmission control protocol) does the job of informing the server that the data wasn’t received so that the data is resent.

This is called RETRANSMISSION where it keeps sending the data until it knows that we have received it.

This is often a tradeoff. Because of the guaranteed delivery capability of TCP, it tends to be slow.

Connection
For a client to communicate with the server, a unique connection is needed. TCP uses the IP to establish a stateful connection.

This is why it is able to carry out retransmission and acknowledgment/confirmation. This is how the server knows that it has a client that it needs to send data to.

Congestion control mechanism

The TCP stops once there is a lot of traffic and waits for when there is less traffic then it resumes sending the data.

This is because on the internet there is a lot of packets/information/data going around, so our packets get delayed when the server is overwhelmed.

This happens when a lot of people are sending packets all over the internet.

Packets Ordering

Because the internet does not guarantee that the packets you send would be received in an orderly manner.

TCP has the capability of ordering our packets, by adding identifiers to our packets or data, so this is what it does to enable it to order our packets.

An example of this would be sending a long-detailed email to a friend, what TCP does, in this case, is to break this data into smaller pieces and then orders them.

This helps them to arrive on the server in an orderly manner and prevents unnecessary data loss.

Let’s see some characteristics Disadvantages of TCP.

Large Packet size

TCP usually ends up with larger packet sizes, this is due to all the extra identifiers and informations it adds to the data that it sends.

These identifiers help it achieve retransmission, packet ordering, congestion control, etc.

Larger Bandwidth

With larger packet size comes more bandwidth.

Slow

The delay involved with TCP is due to things like packet ordering, congestion control, retransmission, acknowledgment/confirmation, etc. Basically the advantages of the TCP are the actually things that makes it slow.

Stateful

TCP is stateful, this is because the server and client carries info information about the connection.

So, if in any way the server or client is closed our connection is lost.

Server memory

The server stacks up the TCP connection and allocates memory for each of these connections.

The server has to keep listening so that it knows when it receives data from any part of the connection.

This is possible because of the statefulness and connection-based characteristics of the TCP.

So, in a situation when someone tries to establish a connection to the server using the TCP.

Due to the fact that the server does some kind of waiting, because of the connection, acknowledgment/confirmation, retransmission, guaranteed delivery, packet ordering and congestion control, a bad-client uses these features against the server to create a kind of DENIAL OF SERVICE attack (DOS).

So, this bad client keeps sending a connections request, without letting the server go through the normal process of acknowledgment, retransmission, etc.

This keeps the server waiting until there is a timeout, and the server crashes, this is a very simple explanation of how DOS is perpetuated.

The layer 4 or otherwise called the transport layer also has another transport protocol called UDP (User Datagram protocol).

In another article we would be touching in this.

Until then stayed tuned!!!

With this, we have come to the end of this article.

Guys as always thanks for being here with me. I really appreciate it.

And if you found any sort of value in this please leave a comment share it on Twitter it really does help get the word out so that other devs can find value in it.

Once again thank you for sparing the time to read this article.

If you’d love me to implement a TCP server using NodeJS.

Do let me know and I will do just that.

Much Love.❤❤❤

JavaScript: How to implement the linked list data structure (part3)

chinedu — Sun, 10 Jan 2021 19:30:25 +0000

Introduction

Continuing the series of our data structures and algorithm.

In this article I will be teaching you how to implement a popular data structure called the linked list.

Hey dude…this is going to be a long one grab that cup of coffee, tea or whatever it is you guys drink these days…maybe a bottle of beer. Looooooooooool.

What is a linked list?

A linked list is a data structure that permits insertion and deletion of items from it and would grow accordingly.

Each element in the linked-list consist of a node that stores the element itself and a reference which is also called a link/pointer to the next element.

Let's look at some examples of a linked list

Let's use a conga line as an example.

The above gif is an example of a conga line.

Each person on the conga line is to an element on the linked-list and their hands are to the reference (pointer/link) on the linked-list.

Each person's hands on the linked-list servers as a link to the next person, this is the same for our linked-list with each node's pointer serving as a link to the next nodes.

It is worth pointing out that there are 4 types of linked-list.

Singly linked list
Doubly linked list
Circular linked list
Doubly circular linked list

In this article, we would be implementing only the singly linked list and in a later article we would be implementing a doubly-linked list.

This is because if you can implement the singly linked list and the doubly linked list, you can easily implement the Circular linked list and the Doubly circular linked list with little explanation.

Before implementing the singly linked list. Let's quickly explain the different types of linked lists.

Singly-linked list

This is the most commonly used linked list. In a singly linked list, each node contains two parts.

One part is the element and the other is a reference (pointer/link) to the next node.

Doubly linked list

In the doubly linked list, each node contains three parts.

One part in the doubly linked list contains a link to the next node and the other part has the link to the previous node.

Circular linked list

In a circular linked list, each node contains two parts just like the singly linked list.

The difference between a circular linked list and a singly linked list is that the last nodes element does not point to null, but instead points to head which is the first element on the list.

Doubly circular linked list

The doubly circular linked is similar to the double linked list because its nodes contain three parts.

One part pointing to the next node and the other pointing to the previous node.

It is also similar to the circular linked but with a slight difference being that the last node's elements points to the head while the head previous points to the tail.

For this tutorial, you can run your codes in your browser console or if you have node.js installed on your local machine, you can run your codes in vscode while using the integrated terminal provided by vscode.

Learn how to install node on windows, Mac, and Linux here.

Now you understand the theory behind the types of the linked list.
Let's implement our linked list data structure.

Since we are using classes we would first create our Node class and our linked list skeleton.

class Node {
     constructor(element, next = null) {
       this.element = element;
       this.next = next;
  }

class LinkedList {
   constructor(){
     this.head = null;
     this.length = 0
   }
   //methods go here
   appendFirst(element){}
   appendLast(element){}
   removeAt(position, element){}
   insert(postion, element){}
   indexOf(element)
   remove(element)
   size()
   isEmpty()
   getHead()
   print()
}

Above we have our linked list class with a head property which is where we store the reference to our node.

And also a length property that stores the number of nodes in our linked list.
Let's start implementing our linked list methods.

appendFirst: this method adds a node to the beginning of our linked list.

The insert method takes an element.

Then in this method we instantiate our node and store it in a variable called head, passing in the element which our function received and this.head as the second value of our node class.

Then we set our head variable as the head(this.head) of our linked list.
Then we increment the size.

appendFirst(element){
   let head = new Node(element, this.head)
     this.head = head
     this.length++
}

We put the this.head in our instantiated class, because if there is already a node in the linked list head(this.head), then when adding another node to the list we push the present node to the next, but if the head(this.head) is empty then the node we are adding becomes the only node on the list.

for the sake of this article, I used vscode, and I created a file called index.js(you can name yours with any name of your choice).

Using the vscode integrated terminal would enable us to test and run our codes.

Test

    //instantiating our inked list class
    let list = new LinkedList()

    //using the append first method of the linked list class
    list.appendFirst(10)
    list.appendFirst(15)

    Run in terminal
    node index

    // head: Node { element: 15, next: Node { element: 10, next: null } },
    // length: 2
    // }

Before continuing the implementation of our linked list methods, let's implement the print method.

Print: this method enables us to log our linked list element more neatly and conveniently to the console.

In our print method, we set a variable of current to represent the head of our node.

print() {
   let current = this.head
   while (current) {
   console.log(current.element)
   current = current.next
   }
}

Then we loop through all the nodes using the while loop and in the while loop, we log the current element because we just want the element property.

Then we loop through the nodes by setting the current variable to current.next.

By so doing we simply outputting each element in our linked list.

Test

   // add another element to the linked list
   list.appendFirst(15)
   list.appendFirst(20)

   //Run the print method
   List.print()

   //result logged to the console.
   25 20 15 10

appendLast: This adds a node to the end of the linked list,

Things to look out for

When the list is empty and we want to add an element.
When the list is not empty and we want to add an element to it

For this method, the first thing we do is to create our node instance and pass in our element value.

After that, we define a variable current for internal controls

Let node = new Node(element)
Let current;

After this, we want to implement our first case, which is when the list is empty and we want to add an element to the list.

So, we point our head to our node if our head element is null. Since our head element is null this automatically means we are adding our first element to the list.

If(this.head === null){
   this.head = node
}else{}

Let's implement the second case when we are adding an element to the list if it's not empty.

So, first in our else block, we create a reference to our head.

Then we iterate through the list until the last element on the list is found.

…}else{
   Current = this.head
   While(current.next){
   Current = current.next
}

When looping the list we know we have reached the last element only when the current.next is null.

So all we have left to do is linking the current element to the node we want to add to the list.

Current.next = node

Then finally we want to increment the length of the list so as to keep track of how many elements we have on the list.

Length++

Below is the complete code for the appendLast method of our linked list.

appendLast(element){
   let node = new Node(element)
   let current;
   if(this.head === null) {
      this.head = node;
   } else {
   current = this.head
      while (current.next) {
   current = current.next
  }
   current.next = node
  }
   this.length++
}

removeAt: this method removes an element from the list at a specified position.

Things to look out for

Removing the first element
Removing any element that's not the first

The first step is creating a method that would take the position of the element to be removed from the list.

removeAt(positon){
}

Next using a conditional we want to check that the position we are passing in is valid.

If the position is valid, we would stem from 0 to the length of the list.

While a value that's is not valid would return a string saying "not a valid position on the linked list"

if(position > -1 && position < this.length){
   } else {
   Return "not a valid position on the linked list"
}

Let's handle the first case which is removing the first element on the list.

Before doing that we make reference to the first element on the list using the current variable and also declaring other variables such as previous and index which would initially be 0.

All this would be very helpful for internal controls.

Let current = this.head
Index = 0
Previous

Removing the first element on the list, we use a conditional, saying where the position is 0, we want to set the head to the second element on our list.

So to remove the head element we would point the head to the current.next.

If(position === 0){
   this.head = current.next
}else{}

Let's handle the second case where we want to remove an element from the end or middle of the list.

In other to achieve this we have to loop the list until we get the position we are looking for.

Then we set our previous to current and our current to current.next.

While(index++ < position){
   Previous = current
   Current = current.next
}

Then outside our while block, we can remove the current element from the linked list.

All we do is to link the previous.next to the current.next.

Previous.next = current.next

Then we decrement our list.

length--

Note: This method works well for removing both the last and middle elements.

Test

   //test if it is a valid position on the list
   //result => not a valid position on the list
   console.log(list.removeAt(20))

   //test for removing the head from the list
   Run
   //result => 20 15 10 100
   // 25 at index 0 was removed
   list.removeAt(0)

   Run
   //test for removing the last element from the list
   //the last element on the list is the element with the index of 4 which is 100
   //result => 25 20 15 10
   list.removeAt(4)

   Run
   //test for removing the middle element from the list
   //we choose element at index 2 which is 15
   //result => 25 20 10 100
   list.removeAt(2)

Below Is the complete code snippet for our removeAt method.

removeAt(position){
   if (position > -1 && position < this.length) {
     let current = this.head;
     let index = 0;
     let previous;
    if (position === 0) {
     this.head = current.next
    } else {
     while (index++ < position) {
      previous = current
      current = current.next
   }
     previous.next = current.next
   }
   this.length--
   } else {
     return "the position is not valid"
   }
}

Insert: this method inserts a new element to a position on the list.

Things to look out for

Inserting an element to the first position of the list
Inserting an element at the end or middle of the list

The first step to take is creating a method that takes a position and an element to be inserted.

Insert(position, element){
}

Next, we need to do what we did for the removeAt method, since our method is taking values for the position, we want to insert the element, we need to make sure these values are not out of bound.

We do this using a conditional and returning a string saying "no item was added"

If(position > = 0 && position < = length){
   }else{
     Return "no items added"
}

Now, let's handle the first case where we are adding an element to the first position on the list.

But before going ahead with that let's instantiate our node class as well as create some variables for internal controls.

Const node = new Node(element)
Let current = this.head
Let previous;
Let index = 0

To add an element to the first position of the linked list, we set the node.next to the current.

And simply point the head to the node.

By so doing we have another element on the list.

If(position === 0){
   node.current = current
   head = node
}else{}

Handling the second case is inserting an element to the end, or the middle of our list.

The first thing we do Is loop the list until we get to the position where we want to insert an element.

We do this in our else block of code.

…} else {
   While(index++ < position){
   previous = current
   current = current.next
}

When we are out of the loop, the previous would be pointing to the element present before the position we want to insert a new element.

While the current variable would be pointing to the element present after the position where we would insert a new element, which is between the previous and current.

Then we need to link the new node and the current element.

node.next = current

After that we want to point the previous.next to node, by so doing we have successfully change the link between the previous and current.

previous.next = node

Then after that, we want to keep track of the length property of our linked list class.

Here we decrement the length and return a string saying "a value has been added to the list".

this.length++
return "a value has been added to the list"

Test

   //let's insert an element to the first position on the list   //(index of 0)
   //current list is 25 20 15 10 100
   //after inserting we get 500 25 20 15 10 10
   //return "a value has been added to the list"
   list.insert(0, 500)


   //let's insert to the middle of the list
   //current list is 25 20 15 10 100
   //after inserting we get 25 20 15 500 10 100
   //return "a value has been added to the list"
   list.insert(3, 500)


   //let's insert to the end of the list
   //current list is 25 20 15 10 100
   //after inserting we get 25 20 15 10 100 500
   //return "a value has been added to the list"
   List.insert(5, 500)


   //if we try to add to a position that's not on the list it won't be added we 
   //just return the original list and a string saying "Not a valid position on the list".
   console.log(list.insert(10, 500))

Below is the complete code for our insert method.

insert(position, element){
   if (position >= 0 && position <= this.length) {
     let node = new Node(element)
     let current = this.head
     let previous
     let index = 0
   if (position === 0) {
     node.next = current
     this.head = node
   } else {
     while (index++ < position) {
       previous = current
       current = current.next
   }
      node.next = current
      previous.next = node
   }
     this.length++
     return "a value has been added to the list"
   } else {
     return "not a valid position on the list"
   }
 }

indexOf: this method returns the index of an element on the inked list. If there is no element it returns -1.

First, let's create the method and pass in the element as a value.

indexOf(element) {
   Return -1
}

Next, in our method we set a variable current to head that would help us iterate the list, and a variable index to increment our count.

Let current = head
Let index = 0

Then using a while loop we check if the element, we are looking for is the current one by looping through the list.

If the list is empty or we get to the end of the list we where current = current.next is null we would return -1

While(current){
   If(element === current.element){
   Return index
}
   Index++
   Current = current.next
}
   Return -1

Note: Before testing the indexOf method make sure to clear all the instances where we passed in values for our appendFirst and appendLast methods.

This is just to prevent unnecessary confusion, after doing that you can go ahead and append values last to the empty linked list.

Test

    //first let's try to check for some values on the linked list
    //result is -1 this is because there are no values on the linked list (we //removed 
    //themm all)
    console.log(list.indexOf(20))

    //let's append some values using the appendLast method before checking for their  
    //index.
    list.appendLast(100)
    list.appendLast(200)
    list.appendLast(300)
    list.appendLast(400)

    //let's get the index of 100 and 200(you can go ahead and play around with getting 
    //the index of 300 and 400)
   //results should be 0 and 1 which are the index of 100 and 200
   console.log(list.indexOf(100))
   console.log(list.indexOf(200))

   //let's check again for elements that are not on our list
   //results would be -1 because our list doesn't contain the element 500
   console.log(list.indexOf(500))

You could send me a DM with your solution on Twitter or Instagram.

With the index method implemented, we can implement the remove method of our linked list class.

Below is the complete code for our insert method.

indexOf(element) {
   let current = this.head,
   index = 0
   while (current) {
     if (element === current.element) {
     return index;
  }
   index++
   current = current.next
}
   return -1
}

Remove: this method removes an element from the list.

Remove(element) {
   Let index = this.index(element)
   Return this.removeAt(index)
}

Taking a closer look you'd see that we are reusing the index and removeAt method.

To easily remove an element from the list.

So, if we pass an element value to our indexOf method and call the index in our removeAt method this removes the element from the list.

Test

//lets try to remove and element that's not on the list
//result we just return the list
list.remove(500)


//lets try to remove the element 200 of index 1
//results should be 100 300 400
list.remove(200)

isEmpty: this returns false if the size of the linked list is bigger than 0 and true if the linked list does not contain any element.

isEmpty() {
   return this.length === 0
}

Size: this returns the number of elements that are contained in the linked list.

The length property is controlled internally since the linked list class is built from scratch.

size() {
   return this.length;
}

getHead: this returns the heads property of the linked list class.

getHead() {
   return this.head
}

There you have it we are done with implementing the linked list.

The linked list data structure is one of the most popular data structure and questions like reversing a linked list usually pop up in tech interviews, so it does help to completely understand the intricacies of how it works and how to implement it.

Guys pls it took quite a lot to make this article of over 3.5k words please share it with your friends on Twitter, Instagram, and Facebook.

This does help get the word out so that every other person can find value in it.

Once again thank you for sticking this long, with me on this one.

You can reach out to me on Twitter or send a Dm on Instagram. Much Love❤️❤️❤️❤️

70+ JavaScript library, frameworks, tools, and plugins

chinedu — Tue, 05 Jan 2021 21:19:38 +0000

Hey and welcome to today's article 😊.

I decided to put together some JavaScript library, frameworks, tools and plugins.

Some which I use in my projects.

If you find them intriguing share it and save it for later.

Let's go…💃🕺💃🕺💃

LIBRARY AND FRAMEWORK'S

NodeJs

Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.

ReactJs

React is an open-source, front end, JavaScript library for building user interfaces or UI components.

VueJs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

NextJs

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.

Angular

Angular is a TypeScript-based open-source web application framework

Svelte

Svelte is a free and open-source front end JavaScript framework

Redux

Redux is an open-source JavaScript library for managing application state.

Meteor

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js.

Backbone.js

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–controller application design paradigm.

Ember.js

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern.

VISUALIZATION

Three.js

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

D3.js

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

Victory.js

A JavaScript 2D vector maths library for Node.js and the browser.

Chart.js

Simple, clean, and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

React-vis

React-vis is a React visualization library.

Trading Vuejs

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

Flexmonster

A pivot table component for web reporting, claims to be the most powerful JavaScript tool for visualizing your business data.

ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

Echarts

A Declarative Framework for Rapid Construction of Web-based Visualization.

Google Charts

Google Charts is an interactive Web service that creates graphical charts from user-supplied information.

amCharts

A go-to library for data visualization. When you don't have time to learn new technologies. When you need a simple yet powerful and flexible drop-in data visualization solution. Includes all basic and advanced chart types, as well as is extendable by additional plugins like Maps and TimeLine.

ANIMATION LIBRARY

Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.

Aos

Animate On Scroll library using CSS3.

Velocity

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation.

Mo.js

Mo.js is a javascript motion graphics library that is fast, retina-ready, modular and open source.

Popmotion

The animator's JavaScript toolbox. Powerful Support for keyframes, spring, and inertia animations on numbers, colors, and complex strings.

ScrollReveal

JavaScript library to animate elements as they scroll into view.

GreenSockJS

GSAP is an industry-standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Skrollr

skrollr is a parallax scrolling library used to transform, scale, skew, and rotate any element.

AniJS

AniJS, Declarative handling library for CSS animations. very beginner-friendly.

Typed.js

Typed.js is a library that types.

Lottie

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images.

VIDEO LIBRARY

Video.js

Video JS is a free and open-source HTML5 video player built with JavaScript and CSS.

Plyr

Plyr is a simple, lightweight, accessible, and customizable HTML5, YouTube, and Vimeo media player that supports modern browsers.

Jplayer

jPlayer is a free and open-source JavaScript library developed as a jQuery plugin that facilitates the embedding of web-based media, notably HTML5 audio and video in addition to Adobe Flash-based media.

Fit vid.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

indigo-player

Highly extensible, modern, JavaScript video player. Handles MPEG-Dash / HLS / MPEG-4 and is built on top of the HTML5 video element.

Flowplayer

Flowplayer is an online video platform for broadcasters, publishers, and media houses. It gives you top ranking ad fill rates and the best-of-breed live streaming.

Popcorn Js

Popcorn.js is an open-source JavaScript library for HTML5 media developers, freely available under the MIT License.

Xgplayer

This is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence.

AUDIO

Howler.js

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

Tone.js

Tone.js packs in features for different virtual instruments, sequencers, effects, and more.

Wavesurfer.js

wavesurfer.js is an HTML 5 audio player and waveform visualizer, made with JavaScript and Web Audio.

Pizzicato.js

Pizzicato.js is another well-rounded library that provides a feature-packed set of tools to create everything from compositions made up of sample groups to precisely synthesized sounds.

Sound Manager 2

Sound Manager 2 is a JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio. Makes it easy to play audio using JavaScript.

Amplitudejs

AmplitudeJS lets you build a fully customizable web audio player Stop being limited by the web browser's audio player design.

Vexflow

Vexflow is a JavaScript library for rendering standard music notation and guitar tablature.

Sound js

SoundJS abstracts HTML5 sound implementation, making adding consistent cross-browser sound to your games or rich experiences much easier.

Ejecta

Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms - only Canvas and Audio elements. This focus makes it fast.

GAMES

MelonJS

MelonJS is yet another 2D focused game engine. By including the library into your code, you gain access to all kinds of features required for any game worth its money, such as physics support, collisions, sprites, and more.

Pixi.js

Superfast HTML 5 2D rendering engine that uses webGL with canvas fallback.

Phaser

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software and developed by Photon Storm. Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support.s

Babylon.js

Babylon.js is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5.

Matter.js

Matter.js is a 2D physics engine for the web.

Egret core

Egret is a brand new open mobile game and application engine which allows you to quickly build mobile games and apps on Android,iOS and Windows.

Melon.js

MelonJS is a lightweight yet powerful HTML5 framework designed from the ground up to provide a true plugin-free 'write-once, run-everywhere' gaming platform. melonJS is an open-source project and supported by a community of enthusiasts. See our Gallery for a few examples of games powered by melonJS.

Crafty

Crafty is a JavaScript game library that can help you create games in a structured way.

FORMS

Quill

Module for simple form and input field bindings. Automatically creates hidden input fields for a form and adds submit handling and submit by key. You may also specify your own custom input fields. It creates fields for text, html and delta.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you're building something new from scratch, but also when you're trying to integrate something into an existing application with lots of existing markup.

Selectize.js

Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Parsley.js

Parsley, the ultimate JavaScript form validation library
Validating forms for with this tool for frontend have never been so powerful and easy.

Fine Uploader

FineUploader is also simple to use. In the simplest case, you only need to include one JavaScript file.

Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Thanks for reading!

My hope is that after finishing this article you would have tools for creating awesome features with JavaScript in the browser.

Reach out on Twitter with some of your personal favorite libraries/frameworks and tools to use. Love you❤️❤️❤️🤓🤓🤓

Javascript: How You Can Implement a Stack in 3 Mins

chinedu — Sun, 27 Dec 2020 23:49:02 +0000

Rocks stacked on each other

Introduction

So, a few days ago, I ran a survey on my stories on Instagram and the result of this survey is the reason I decided to write a blog post about the topic STACKS in using JavaScript.

Instagram poll

What's the stack data structure?

A stack is a data structure that follows the LAST IN FIRST OUT (LIFO) principle. There are several real-world examples, e.g. plates, books stacked on each other, etc.

Books stacked on each other

The removal and addition of new items in a stack take place at the same end. This is because stacks follow the LIFO principle this means that the newly added items are the first to be removed.

Let’s create a stack

Enough of the explanations, let's write some codes🤓🤓🤓! We start with the basics and declare a class using an array in the constructor property of our class.

class Stack {
      constructor() {
         this.items = [];
      }
      //methods to be implemented go here
      Push(item)
      Pop()
      Peek()
      isEmpty()
      Clear()
      Size() 
      Print()
}

Let’s implement each method for our stack Class.

Push: This adds items or an item to the top of the stack.

Push(item) {
     //pushing an item into the stack
     this.items.push(item)
}

Pop: This removes the top item from the stack and returns the removed item.

Pop() {
    //removes an item from the stack
    return this.items.pop()
}

Peek: This returns the top element from the stack but doesn’t modify it (it doesn’t remove it).

Peek() {
     //returning the top item without modifying it
     return this.items[this.items.length - 1]
}

isEmpty: This returns false if the stack contains items but returns true if it does not contain an item.

isEmpty() {
        //return true if the stack is empty
        return this.items.length == 0;
}

Clear: This would remove all the items from the stack.

Clear() {
      //output all the content of the stacks
      return this.items = [];
}

Size: This returns all the number of items contained in the stack. (this is similar to the length property of the array data-structure)

Size() {
     //returns the number of items in the stack
     return this.items.length;
}

Print: This would output the content of the stack.

Print() {
      //output all the content of the stacks
      console.log(this.items.toString())
}

YOOHOO…Champ! You made it this far! You are absolutely amazing

Let’s use the stack class

The first thing we have to do is to instantiate the stack class we created.

//instantiating the stack
let stack = new Stack()

Next, we can add some items (we push 1 and 2, we can push any item to the stack)

//pushing a new item to stack
stack.Push(1)
stack.Push(2)

Next, we can go ahead to test if the items were added to the stack. This should return false.

//returns false
console.log(stack.isEmpty());

Let’s go ahead and call the peek method, we would get 2 this is because it’s the last element added to the stack.

//returns 2
Console.log(stack.Peek());

Let’s go ahead and add one item to the stack.

//adds 3 to the stack
stack.Push(3);

Let’s check the size to confirm how many items are in our stack.

//out puts 3
console.log(stack.Size());

Let’s print all the items in our stack

//returns [1,2,3]
Stack.Print()

Let’s go ahead and remove the item from the stack

//removes each item from the stack
Stack.Pop()
Stack.Pop()
Stack.Pop()

Let’s check once again if it’s empty

//returns true
Stack.isEmpty();

There you have it!!!

In just a few simple steps we have implemented stacks using JavaScript.

As with everything it really goes into practicing these steps so you get to understand it deeply. In a later article, I would be writing about the application of stacks as well as solving some common computer science problems with it.

If you enjoyed this article why not follow me on Twitter, also take a screenshot and send a DM on Instagram, I will give you a shoutout alongside other of our 36k community members.😉😉😉

Cheers! Happy Hacking.

Javascript: How to implement a queue

chinedu — Sat, 26 Dec 2020 17:04:32 +0000

After, writing about STACKS, the positive feedback, and all the support and nice DMs I got on Instagram and Twitter has made me turn this into a series, yeah you read that right.

This is going to be a series of data-structures and algorithms using javascript.

I hope you reading this enjoys it. Let’s go…🤓🤓🤓

In today’s blog article, we would be talking about queues!

What is a queue A queue is a data structure that follows the first in first out (FIFO)principle.

Example: people standing in a line (first come first serve) to get groceries from a grocery store, etc.

Queues are very similar to stack, but instead of using the LIFO principles like stacks do they use the FIFO principle which we would implement as we go on.

In javascript, we have array methods that define the queue class which is a push() and shift() method.

Adding an item to the queue is commonly known as enqueuing and removing an item from the queue is known as dequeuing.

push() is used to enqueue while shift() is used to dequeue.

The shift() is a javascript array method that removes and returns the first element of an array.

Let’s create a queue

Let’s write some codes, shall we? As usual, we start with the basics and declare a class using an array in the constructor property of our class.

// Queue class

Class Queue{
     constructor() {
       this.items=[];
     }
    //Methods to be 
     implemented go here
      enqueue(item)
      dequeue()
      front()
      isEmpty()
      size()
      print()
}

Let’s implement each method for our queue class.

Enqueue: This adds a new item to the back of the queue, this is similar to standing in a line (queue) to get items from a grocery store.

enqueue(item) {
//enqueuing items onto the queue
this.items.push(item)
}

Dequeue: This removes and returns the first item on the queue, this is the first come first serve.

The first person to get to our imaginary grocery store is the first person to be attended to.

dequeue(){
//remove items from the queue
this.items.shift()
}

Front: This method returns the first item from the queue, but it does not modify the queue.

In our imaginary grocery store, let’s imagine that the grocery store attendant wants to know who is first on the queue.

Note that he has not attended to this person yet in our case has not modified the queue.

He just wants to know who is first on the queue.

front() {
//returns the first item on the queue
this.items[0]
}

isEmpty: This returns false if the queue contains items or is greater than 0, and returns true if the queue is empty.

In our imaginary grocery store, let’s imagine that the grocery store attendant wants to know if there are more customers to attend to, if there are customers, that means the queue is not empty so as a result, we get false.

But if the grocery attendant has attended to everyone in the queue, then that means the queue is empty so as a result, we get true

isEmpty() {
this.items.length == 0;
}

Size: This gives us the number of items in our queue.

Back to our imaginary grocery store where we have a queue of customers.

Let’s imagine that the grocery store attendant for some reasons best known to him wants to know how many people he is attending to at the moment (people on the queue) then he will have to count them right? Yeah.

size() {
//check the number of items on the queue
this.items.length;
}

Just like when we implemented the STACKS class. We could go a step further to add a print method to help us print all the items in the queue whenever we want.

print() {
//log all the items in the queue
console.log(items to String())
}

Let’s use the queue class First, we have to instantiate the queue class we created

//instantiating the queue
let queue = new Queue()

Next, we can add items to our queue (since we are using the imaginary grocery store queue we would use real peoples names and enqueue them unto our queue. Let's use Vivian, Gideon, and Shalom)

// pushing a new item (customers) to the queue
queue.enqueue("Vivian")
queue.enqueue("Gideon")
queue.enqueue("Shalom")

Next, we can go ahead to check if items are on the queue (checking if anyone is on our grocery store queue)

//returns false
console.log(queue.isEmpty())

Next, we call the front() method, by doing so we would get Vivian because she happens to be the first person in the queue.

//returns vivian
queue.front()

Now, we want to check the size of our queue to see how many items (customers) are on it.

//returns 3
Console.log(queue.size())

Let’s print out all the items in our queue

//returns [“Vivian”, “Gideon”, “Shalom”]
queue.print()

Let’s remove items from the queue.

In our imaginary grocery store, we have to attend to our customers right? Yeah! If that be the case this has to happen in a first come first serve format (FIFO)).

Let’s do this

//remove each item from the queue
queue.dequeue()
queue.dequeue()

if we run

queue.print()

we see that Vivian and Gideon has left the queue (our first two customers have been tended too) so we have only shalom to attend too.

Let’s not waste his time let’s attend to him, so once again we run the dequeue method of our queue class

queue.dequeue ()

To confirm our last action we can once again check if our queue is empty. This should return true

//returns true
queue.isEmpty()

With this, we can say we have successfully implemented a queue in JavaScript KUDOS you made it to this point but one more thing…

Whenever a new tab is opened in a browser a task queue is created.

This is because of something we call the event loop and in the event loop only a single thread handles all the tasks for a single tab.

The browser handles several tasks such as handling user interaction (keyboard clicks, mouse clicks, etc), processing and executing async requests, executing javascript, and rendering HTML.

This is amazing that a very powerful and yet popular language like javascript uses queues to handle its internal control. You could learn more about it here

Once again as always thanks for being with me till the end.

Next, I would be writing about a very popular kind of queue implementation or maybe a linked list.

Well, I don’t know which to write about if you could make that choice for me I’d really appreciate you could consider sending a DM on Twitter or Instagram (join our 36k community members).

Cheers! Keep Grinding❤️