DEV Community: Ahmad

Guide to MongoDb

Ahmad — Mon, 09 Mar 2026 19:45:59 +0000

Introduction -

Brief database description -
A database is a structured, organised, collection of data used for storage, retrieval, management, and manipulation of data.

SQL -
Traditionally this is done with what is called an SQL (Structured Query Language). This language allows users to communicate with relational databases such as MySQL, Postgres, SQLite, etc. A relational database is a database that organises data into rows and columns, creating relationships between datapoints.

SQL databases are the right choice for many applications, but they can take time to prepare, and though they are easy to scale onto bigger servers, they are challenging to scale across multiple servers due to them being “rigid”, maintaining strong data consistency, and managing complex join operations.

Enter MongoDB -

What is MongoDB? -
A good alternative to SQL databases is MongoDB, an open-source, document oriented, NoSQL database.

Why use it? -
NoSQL means that relational tables aren’t used, and instead other formats such as key-value pairs, graphs, and documents are used. These formats are much more flexible and can easily store a wide variety of data, and due to them being non-relational NoSQL databases can be significantly faster and easier to design, update, and scale (vertically and horizontally).

Making a MongoDB database -

Installation options -
MongoDB can be either locally installed or set up in the cloud through MongoDB Atlas.
Why MongoDB Atlas is preferred -
Installing locally means one would have to maintain and upkeep the system, but MongoDB Atlas is a fully managed database-as-a-server where database clusters, a group of interconnected servers, can be created using AWS, Azure, or Google Cloud.

How to use your database -

Creating a cluster -
Sign up. To access MongoDB Atlas, go to https://www.mongodb.com/cloud/atlas/register and you will be prompted to sign up.
Create a database cluster. You will have the ability to choose a subscription plan, a provider, a region, and tags for categorization.
Connect to your cluster. The steps to doing this include setting up a connection security, choosing a connect method, and finally connecting.

Receiving and displaying data -
This code should be placed in a js file to import and connect to your database.

const { MongoClient, ServerApiVersion } = require('mongodb');
const uri = "mongodb+srv://aford504:Nitro0311$@mvpcluster.zrfg2f2.mongodb.net/?appName=MVPCluster";


// Create a MongoClient with a MongoClientOptions object to set the Stable API version
const client = new MongoClient(uri, {
 serverApi: {
   version: ServerApiVersion.v1,
   strict: true,
   deprecationErrors: true,
 }
});


async function run() {
 try {
   // Connect the client to the server (optional starting in v4.7)
   await client.connect();
   // Send a ping to confirm a successful connection
   await client.db("sample_mflix").command({ ping: 1 });
   console.log("Pinged your deployment. You successfully connected to MongoDB!");
   // Runs function to display data
   await findListings(client, 5);
 } finally {
   // Ensures that the client will close when you finish/error
   await client.close();
 }
}
run().catch(console.dir);

This code receives data from the database sample_mflix’s users collection and prints it to the console.

async function findListings(client, resultsLimit) {
 const cursor = client
   .db('sample_mflix')
   .collection('users')
   .find()
   .limit(resultsLimit);


 const results = await cursor.toArray();
 if (results.length > 0) {
   console.log(`Found ${results.length} listing(s):`);
   results.forEach((result, i) => {
     date = new Date(result.last_review).toDateString();


     console.log();
     console.log(`${i + 1}. name: ${result.name}`);
     console.log(`   _id: ${result._id}`);
     console.log(`   bedrooms: ${result.bedrooms}`);
     console.log(`   bathrooms: ${result.bathrooms}`);
     console.log(
       `   most recent review date: ${new Date(
         result.last_review
       ).toDateString()}`
     );
   });
 }
}

If sample_mflix isn’t in your cluster, then you can click the Load Sample Dataset button to create it.

Assuming you named the file mongo.js, you can now run “node mongo.js” in the terminal to see the five listings of users.

Guide to Figma

Ahmad — Tue, 20 Jan 2026 23:39:07 +0000

What is Figma? -

Figma is a beginner-friendly design tool used to create, prototype, and collaborate on interface designs. Figma can be used when developing apps or websites. Major companies such as Microsoft, Google, and Netflix use Figma to design their UIs.

After entering your preferred name, you will then answer questions to describe yourself, optionally invite others to collaborate with you, and choose a plan, with the starter plan being free. Next, you can begin working on projects.

How to get started -

To get started using Figma, go to their site, click “Get Started,” and sign up using your email.

After entering your preferred name, you will then answer questions to describe yourself, optionally invite others to collaborate with you, and choose a plan, with the starter plan being free. Next, you can begin working on projects.

Starting projects -

A file is where designing takes place, and projects are what group related files to be managed by you and others. Projects are similar to Github project boards, while files are like repositories, within those files, you may create different pages for your potential homepages or menus. Files can be created by many means. To make a file within a project, go to the “All projects” section on the left, then press the blue plus icon in a slot of an existing project to add a file to it.

You can also create a file without a project by hovering over the “Drafts” section on the left and pressing the plus icon that appears to the right of it.

Tools -

There are an extensive number of tools to be used on Figma, but here you will find the key features.

In the center, you will find the canvas. This is the main area where you will create and view your designs.
To the left is the file, which contains the layers panel. This is where you can manage and arrange your frames, shapes, and other items.
To the right is the properties panel. This is where you can change the details of your items.
Finally, at the bottom is the toolbar, where you will find essential functions to making designs, such as frames, shapes, pen, and text. An important practice while using these tools is to name everything, all the way from your projects to your smallest items, to differentiate and organise them. Another is to use components, which store multiple items in a group, and treat them as a single item. To use them, right click on an item and press the “Create component” option. You can then drag other items into the component so they can act as one item.

How to use projects with code -

There isn’t a native way of linking Figma designs to code, though there are other ways to do so. One way to use your designs is through extensions. In the toolbar, press the button labeled “Actions”, then go to the “Plugins & widgets” section. There, you can search for extensions that can translate your designs into code.

Using TeleportHQ, you can select the parts of your design you want to be used as code and export them as a new project.

Know that many extensions that turn designs into code don’t get everything perfectly, after converting your project to code, you may have to adjust items to look how they did before. Within the new project, press the “Code” button in the top right to view the project in React, HTML, Next, and other languages.

Finally, you can copy the code into a repository to be used in creating a website.

Set Data Structure

Ahmad — Thu, 06 Nov 2025 21:13:27 +0000

When storing data, the way in which you go about it is essential. In some cases, you may want to dump data into a storage to retrieve it later, while in others, you may want to set off data into different categories. In this blog, you will be introduced to the set data structure and its significance.

Data Structures -

Before understanding sets, we must learn about data structures.

Data structures are a means of storing, sorting, and handling data.
They allow you to efficiently manage data in ways suited for most tasks.

Sets -

Sets are data structures that store unique, unordered values.
Sets are good for comparison and checking membership, rather than retrieval and modification, as they don’t have a direct means of returning single values.
How to use sets in JavaScript:

var set = new Set([1, ‘hi’, 0, 1]); // {1, ‘hi’, 0}

Implementation -

Most sets are implemented through hash tables, which on average have an O(1) time complexity for insertions, deletions, and checks.
Some sets are implemented through binary search trees, which on average have an O(log n) time complexity for the same functions.
JavaScript uses hash tables.

Unique -

Uniqueness is one of the main appeals of sets. If a duplicate value is passed into a set, the set will not accept the value.
However, in JavaScript, a set can contain identical objects and arrays, as long as they have different references.

var set = new Set([{greeting: ‘hi’}]); // {{greeting: ‘hi’}}
set.add({greeting: ‘hi’}); // {{greeting: ‘hi’}, {greeting: ‘hi’}}

Unordered -

Generally, sets don’t maintain any specific order.
There aren’t any keys or indices representing values.
The value itself is what identifies it. Though in JavaScript, sets maintain input order.

Basic Methods -

Here are some basic methods associated with sets:

set.add(value) - adds values
set.delete(value) - removes value
set.has(value) - returns if a value exists
set.size() - returns the size of the set
set.clear() - removes all values from the set
set.values() - returns the values of the set

Iteration -

Due to the nature of sets, iteration isn’t the most useful, but here are some ways to do so:

set.forEach(callback(value, key, set)) - key is the same as value
for (const val of set) {}

Other Methods -

Here are some methods that compare two sets:

setA.union(setB) - returns a set containing elements found in either set
setA.intersection(setB) - returns a set containing elements found in both sets
setA.difference(setB) - returns a set containing elements not found in setB
setA.symmetricDifference(setB) - returns a set containing elements not found in both sets
setA.isSubsetOf(setB) - returns if setA’s elements are found in setB
setA.isSupersetOf(setB) - returns if setB’s elements are found in setA
setA.isDisjointFrom(setB) - returns if the sets share no elements

Sets to and from arrays -

var set = new Set([1, ‘hi’, 0, 1]); // {1, ‘hi’, 0}
var arr = [...set]; // [1, ‘hi’, 0]

Applications -

Sets may be preferable to other data structures when trying to…

Store unique elements.
Check for membership of elements.
Compare and store differences/similarities of data.

With this information on the set data structure, you now have one more way of managing data at your disposal. Though sets are only one tool out of many, they can be the perfect solution to your data storage problems.

Three useful Javascript array methods

Ahmad — Thu, 04 Sep 2025 21:31:58 +0000

When working with arrays, repeatedly creating functions to access and modify them can become tedious. The following array methods streamline your workflow and make your code cleaner.

Array.findIndex(function) -

The .findIndex() method iterates through an array, calling the given function for each element. If the function returns true for any element, it returns that element’s index; otherwise, it returns -1. Here’s an example.

var arr = ["Here's", "an", "example!"];

var output = arr.findIndex((element, index, array) => element === "example!"); // Returns 2

Technicalities -

The callback function uses the current element, its index, and the array as arguments.
A downside to this method is that it will only return the first value that returns true.

Uses -

Verifying that certain values exist in an array.
Finding and altering certain values in an array Searching arrays for values that meet different criteria.

Array.splice(start, deleteCount, item1) -

The .splice() method extends the functionality of .push() and .pop(). This method inserts items into an array after the start argument and deletes a specified number of elements, starting with the start index. Here’s an example.

var arr = ["Here's", "an", "example!"];

arr.splice(1, 1, "my", "grand"); // Returns ["Here's", "my", "grand", "example!"]

Technicalities -

The method can take an infinite number of items.
deleteCount can be 0.
Items aren't required.
The method alters the original array.
It returns an array containing the deleted values.

Uses -

Replacing array elements.
It can be used as a precise .push().
It can be used as a precise .pop().

Array.reduce(function, initialValue) -

The .reduce() method calls a given function for every element in an array, using four parameters: accumulator, the value returned by the previous function call; initialValue, used for the first function call; currentValue, the current element in the array; currentIndex, the current index; and the array itself. The method returns one value, being the final result of the given function. Here’s an example.

var arr = ["Here's", "an", "example!"];

arr.reduce((accumulator, currentValue) => accumulator + "-" + currentValue); // Returns "Here's-an-example!"

arr = [1, 2, 3, 4];

arr.reduce((accumulator, currentValue) => accumulator * currentValue, -1); // Returns -24

Technicalities -

If no initialValue is given, the first value of the array will be used, and the second value will become the currentValue.
The original array won’t be affected.

Uses -

Calculating numbers in an array.
Comparing values in an array.

With these methods, you can efficiently manage your arrays without having to jump through hoops of code.

Resources: developer.mozilla.org