If you like my work, this is how you can buy me a coffee!

Before starting to code, as many tutorials on the internet do, I want to give you a bit of context about this topic. To begin with, let’s talk about some key concepts related to this post. Part 1 covers the key concepts and the app details, and Part 2 will be focused on explaining the coding aspects.

What is a socket?

The IBM website defines a socket as a “communications connection point” (final point), which can be nominated and redirected in a network. In simple words, they are a fundamental resource in the development of networking applications as they allow communication between two points in one or many networks.

Socket types

They are classified by messaging fidelity and order. The most common socket families are:

• SOCKET_STREAM: Defines a connection-oriented service (TCP).
• SOCK_DGRAM: Defines a connectionless service (UDP).
• SOCK_RAW: Allows access to lower layer protocols (IP or ICMP).

Those families are registered in different domains called address families as follows:

• UNIX: Defines the address families AF_UNIX
• Internet: Specifies the address family AF_INET and requires (TCP/IP) protocol installed in the system.
• NDD: Defines the address family AF_DD

Now it’s time to start coding!

We will build a terminal chat application using an oriented-connection protocol and the client-server model.

The server creates a socket and listens to a specific port while waiting for client connections. Clients should connect at the same IP-Port as the server.

The socket family will be SOCKET_STREAM and AF_INET as the address family. For Windows users, TCP/IP is installed by default in Windows 10.

We will use localhost with the IP 127.0.0.1 and the 5000 port (commonly used for networking applications).

Source code

Server

As mentioned in the title, we will use Python along with a few libraries in order to allow our server to create and listen for socket connections. We import the socket library and threading for multithreading processes. In addition, the JSON library allows us to parse messages and convert them into Python dictionaries.

import socket
import json 
import threading

Our server.py file will have 4 functions:

• start_server: To instantiate the socket object and assign IP-Port values.
• broadcast_message: To send a message from the server to all clients (broadcast)
• target_message: To send a message to a specific client using the client_id value.
• handle_clients: Assign an individual client_id and manages message sending using the target_message or broadcast_mesage depending on the purpose.

def start_server(ip, port): 

def broadcast_message(message,sender_socket):

def target(message, target_id):

def handle_clients(client_socket, addr, connected_clients):

Client

Our client.py file will have 2 functions:

• start_client: Instantiates the socket object and connects to the server IP-Port.
• receive_mesage: Gets the client socket instance as parameter to decode the messages sent by the server.

def start_client(ip, port, username): 

def receive_message(client_socket):

For further reading about socket objects in Python, I recomend the official docs to get to know about other methods.

I hope it can be helpful, the full code will be available in Part 2.

Thank you.

References

• https://docs.python.org/3/library/socket.html#socket-objects
• https://www.ibm.com/docs/en/i/7.3?topic=communications-socket-programming

One of the more useful data-structures in computer science is the hash table, also known as hash map in some programming languages. They store key-value pairs and computes the indexes with a function called hash code. In this article I will explain how to implement a basic hash table in order to understand how indexes are calculated and how to represent the main operations such as insertion, searching and deletion.

When learning a new concept (not only in programming but also in general) I try to represent this topic in the simplest way I can do, so I can extend it later on if I need a sophisticated version of that thing. That’s exactly what I am looking for in this article, to explain it in the most basic possible way as I would have liked to learn some time ago.

To begin with, let’s say that a hash table is quite famous for its powerful performance in insertion or searching. Commonly used for database indexing or set implementation.

As we represented other data-structures in this series, I will use the concept of classes of ES6 Javascript version that I consider more readable.

Our hash table class looks like this:

class HashTable {
  constructor() {
    // Initialize the hash table with an array of a fixed size.
    this.hashTable = new Array(50);
  }
}

It is important to initialize a fixed array because one of the considerations about hash tables is the memory usage. This is one of the concerns we need to consider when implementing this data-structure instead of arrays

There are many ways to implement the hash code function and, in this case, I use the sum of char values using the charCodeAt function in Javascript.

hashCode(key) {
    let sumOfCharValues = 0;
    for(let i = 0; i < key.length; i++) {
      sumOfCharValues += key.charCodeAt([i]);
    }
    let index = sumOfCharValues % 50;
    return index;
  }

We simply loop through the keys and retrieve the char code of every letter assuming we have strings stored as values. Finally, we create the index applying the modulo operation between our sumOf CharValues and a prime number equals to my array size in order to add uniqueness to our hashing method (You can find most of these implementations using 31 prime number as modulo).

As I said before, the goal with hash functions is to generate unique number indexes so, in our example if we apply the hash function to the string “name” it will return:

• n => 110
• a => 97
• m => 109
• e => 101

Sum of char values = 417

Index returned = 417 % 50 => 17

So 17 is the index for our key-value pair.

With the hash code function solved, the remaining operations become easier to implement because they probably will use the hashCode function to find the element we need to retrieve or delete as an example.

For instance, the “insertion” operation, called ‘put ’ in our class:

put(key, value) {
    let index = this.hashCode(key);
    this.hashTable[index] = value;
 }

We compute the index and insert it at that position in our fixed array.

The get method retrieves a value based on the key passed as argument:

get(key) {
    let index = this.hashCode(key);
    
    return this.hashTable[index];
 }

The last two methods for the hash table class are remove and contains, we use the last method to validate if a key is present into the hash table by using its hashCode.

 remove(key) {
    let index = this.hashCode(key);
    // Remove the key-value pair with the given key from the hash table.
    this.hashTable[index] = undefined;
  }

Assign the value to undefined is the simplest way to delete considering that all unused positions in a Javascript array are undefined by default.

The following is the code for the contains method:

contains(key) {
    // Return true if the hash table contains the given key, false otherwise.
    let index = this.hashCode(key);
    
    return this.hashTable[index] !== undefined;
 }

Now we are done! This is the basic hash table I wanted to share but, before finish, it’s time to test the class.

// Example usage:
const hashTable = new HashTable();
hashTable.put("name", "Alice");

hashTable.put("age", 25);
console.log(hashTable.get("name")); // Should print "Alice"
console.log(hashTable.contains("city")); // Should print false
hashTable.remove("age");
console.log(hashTable.contains("age")); // Should print false

As mentioned in previous posts, this is just the basic concept which certainly can be improved and refactored, taking into consideration that sometimes two keys can reflect the same hash code called as “Collisions” which is not covered in this article.

For further reading about hash table collisions, I recomend the following article in GeeksForGeeks.

I hope it can be helpful, the full code is available on CodePen.

Thank you.

Happy new year everyone!

I hope everything is good and all your purposes will be achieved in 2024.

This is the first story of 2024 and I want to continue the “Data structures series” remembering that we already posted 2 stories about Stacks and Queues so if you do not read them yet check them out to introduce you in the concept of data structures.

Linked list are a very particular data structure as they can be presented in different forms:

• Simple linked list
• Double linked list
• Circular linked list

I will explain each one in detail. Before that, we need to consider 3 aspects about linked lists components:

• Node: Contains the data element
• Next: Reference to the next node
• Head: First node in the linked list

Now let’s implement our basic linked list with Javascript:

First of all we need the Node representation, I wil use a class so we can imported and apply code reusability if necessary (with other data-structures implementations).

class Node {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

I initialize the next property with null as we do not have any next element at the beginning.

Next, it is the turn to the linked list class:

class LinkedList {
  constructor() {
    this.head = new Node()
  }
}

The head of the linked list is a Node instance so we have access to the value and next properties.

The first operation in the LinkedList class is insertion.

insert(value) {
    let current = this.head
    // Insert a new node with the given value at the end of the list.
    const node = new Node(value)
    if(!this.head) {
      this.head = node
    } else {
      current = this.head
      while(current.next) {
        current = current.next
      }
    }
    current.next = node
  }

We use a current value with a reference of the head (First Node) and the next step is to create a new Node instance. If the head is null, we assign the Node to be the head, if not, we use the current element to walk through every Node using the next property and then, assign the new node.

The second basic operation is deletion as follows:

delete(value) {
    if(!this.head) {
      return
    } 
    let current = this.head
    let previous = null
    while(current) {
      if(current.value === value) {
        previous.next = current.next
        return
      }
      previous = current
      current = current.next
    }
  }

Using the same principle, we can validate if we have a head and then, we create the current reference to the head element. For deletion it is necessaty to consider the previous element and not only the next. This strategy help us to “jump” the Node to be deleted and link the previous and next Node elements if the value we passed to the method matches with the current.value in the linked list.

The next one is the search method:

search(value) {
    let current = this.head
    // Return true if the value is in the list, false otherwise.
    while(current.next) {
      current = current.next
      if(current.value === value) {
        return true
      }
    }
    return false
  }

We need to walk through every element and validate if the value we passed matched with the current.value element (like in deletion). At the end, we returned true or false depending on the success or fail of the operation.

The last method is a helper method but not completely necessary. It will return an array representation of the data-structure when we printed to the console.

The following is the toArray method:

toArray() {
    let current = this.head
    const arr = []
    while(current.next){
      current = current.next
      arr.push(current.value)
    }
    return arr
  }
}

We apply the same principle (Loop the linked list with the current value) to assign every value to the empty array using the push native array method. Finally we return the array.

Now we can do some simple tests to veryfy our linked list:

// Example usage:
const linkedList = new LinkedList()
linkedList.insert(1);
linkedList.insert(2);
linkedList.insert(3);
linkedList.insert(4);
linkedList.insert(5);
linkedList.insert(6);
linkedList.insert(7);
console.log(linkedList.toArray()); // Should print [1, 2, 3]
linkedList.delete(5);
console.log(linkedList.toArray()); // Should print [1, 3]
console.log(linkedList.search(3)); // Should print true

This is the full code of the class implementation:

class Node {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class LinkedList {
  constructor() {
    this.head = new Node()
  }
  
  insert(value) {
    let current = this.head
    // Insert a new node with the given value at the end of the list.
    const node = new Node(value)
    if(!this.head) {
      this.head = node
    } else {
      current = this.head
      while(current.next) {
        current = current.next
      }
    }
    current.next = node
  }

  delete(value) {
    if(!this.head) {
      return
    } 
    let current = this.head
    let previous = null
    while(current) {
      if(current.value === value) {
        previous.next = current.next
        return
      }
      previous = current
      current = current.next
    }
  }

  search(value) {
    let current = this.head
    // Return true if the value is in the list, false otherwise.
    while(current.next) {
      current = current.next
      if(current.value === value) {
        return true
      }
    }
    return false
  }

  toArray() {
    let current = this.head
    const arr = []
    while(current.next){
      current = current.next
      arr.push(current.value)
    }
    return arr
  }
}

// Example usage:
const linkedList = new LinkedList()
linkedList.insert(1);
linkedList.insert(2);
linkedList.insert(3);
linkedList.insert(4);
linkedList.insert(5);
linkedList.insert(6);
linkedList.insert(7);
console.log(linkedList.toArray()); // Should print [1, 2, 3]
linkedList.delete(5);
console.log(linkedList.toArray()); // Should print [1, 3]
console.log(linkedList.search(3)); // Should print true

Congratulations! This can be improved a lot adding some other important operations but with this basic template you can understand the first steps of the linked list data-structure and, the most important thing, made with plain javascript.

I hope it can be helpful, you can find the full code upload in CodePen.

Thank you.

Continuing with the data-structures series, today I will discuss another basic implementation that I hope you will find interesting.

Last time I talked about stacks which implements LIFO pattern (Last in, first out), so in this case, the queue uses the FIFO pattern (First in, first out).

Consider this about the difference between stacks and queues.

For the queues you need to consider two main operations: Enqueue and Dequeue.

To start with, we will create a simple class called queue

class Queue {
  constructor() {
    // Initialize an empty array to represent the queue.
    this.queue = []
  }

We initialize our object with an empty array so we can execute some operations over this.

First of all, for validation purposes we can create a method to check if the queue is empty.

isEmpty() {
    // Return true if the queue is empty, false otherwise.
    return this.queue.length === 0
  }

Next, for the enqueue method, we receive an item to enqueue and validate if we already have items in our queue (if it is empty), if not we loop over the queue from the front to the rear and move the existing items 1 place to the left (this.queue[i] = this.queue[i-1]) so the new item is placed in the rear.

 enqueue(item) {
    // Add the item to the rear of the queue.
    
    if(this.isEmpty()){
      this.queue[0] = item
    } else {
      for(let i = this.queue.length; i > 0; i--) {
        this.queue[i] = this.queue[i-1]
      }
      this.queue[0] = item
    }
    
  }

The dequeue method works almost the same as the previous one but we can perform 2 more operations. The first one is the deletion of the item at the front of the queue with deleted = this.queue[this.queue.length-1]. We declared an empty array which will contain our queue minus the deleted item. After this, we have to move our items to the left as berfore and then loop left to right to assingn the remaining items to our temp array.

dequeue() {
    // Remove and return the item from the front of the queue.
    let temp = []
    const deleted = this.queue[this.queue.length-1]
    
    for(let i = this.queue.length -1; i > 0; i--){
      this.queue[i] = this.queue[i-1]
    }
    
    for(let i = 0; i < this.queue.length; i++) {
      if(this.queue[i] !== undefined) {
        temp.push(this.queue[i])
      }
    }
    this.queue = temp
      
     return deleted
  }

Finally we return the deleted item.

And that’s it! Now your queue is ready to perform operations such as enqueue and dequeue. Some implementations also have a peek method to return the item at the front of the queue.

peek() {
    // Return the item at the front of the queue.
    return this.queue[this.queue.length-1]
  }

The entire code will be looking like this:

class Queue {
  constructor() {
    // Initialize an empty array to represent the queue.
    this.queue = []
  }

  enqueue(item) {
    // Add the item to the rear of the queue.
    
    if(this.isEmpty()){
      this.queue[0] = item
    } else {
      for(let i = this.queue.length; i > 0; i--) {
        this.queue[i] = this.queue[i-1]
      }
      this.queue[0] = item
    }
    
  }

  dequeue() {
    // Remove and return the item from the front of the queue.
    let temp = []
    const deleted = this.queue[this.queue.length-1]
    
    for(let i = this.queue.length -1; i > 0; i--){
      this.queue[i] = this.queue[i-1]
    }
    
    for(let i = 0; i < this.queue.length; i++) {
      if(this.queue[i] !== undefined) {
        temp.push(this.queue[i])
      }
    }
    this.queue = temp
      
     return deleted
  }

  peek() {
    // Return the item at the front of the queue.
    return this.queue[this.queue.length-1]
  }

  isEmpty() {
    // Return true if the queue is empty, false otherwise.
    return this.queue.length === 0
  }
}

// Example usage:
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.dequeue()); // Should print 1
console.log(queue.peek()); // Should print 2
console.log(queue.isEmpty()); // Should print false

Now we’re done, I hope this could be helpful if you are interested in javascript and data structures as I am.

Congratulations! Now your are able to reproduce queues data structures with your favorite programming language.

In upcoming posts I will cover the “Linked List” implementation to continue with the data structure learning.

If you’d like to see the online implementation, I have posted the entire code on codePen.

When you press the “go back” button in your prefered browser you are applying one of the stack operations called “pop”. But, what does it means? I will cover a little explanation so do not worry about it. The basic stack operations are push, pop, and peek.

In this short post I will guide you through the stack implementation, one of the commonly used and basic data structures. JavaScript native implementations provided by the language and I’m 99% sure that you’ve used them extensively a lot if you have JS experience, these are the famous “Arrays”. Yes, they have a stack implementation and performs the basic operations called “push” (Adding an item at the top of the stack) and “pop” (returning and deleting the last item of the stack).

Now that we know a little bit more about stacks let’s start with the basic methods.

Let’s start by creating a stack class with a constructor method.

class Stack {
    constructor() {
      // Initialize an empty array to represent the stack.
      this.stack = []
    }
}

We have initialized our stack with an empty value as starting point.

Now, the first method is the push method, similar to the push array method. The implementation is simple, we need to pass the new item as an argument to the function and it will be assign at the top of the stack (this.stack[this.stack.length])

push(item) {
  this.stack[this.stack.length] = item
}

For the pop method it needs to return and delete the last item in the stack. In this case I assigned the last item reference in a variable called “deleted” to be returned after the array modification. Also, we need another array to copy the elements and the “magic” part will be the item deletion. For this implementation, I created a for loop to run backwards on the array (i = this.queue.length -1) and move the element positions to the left. After this step we will have the same array with the same length and the last item being undefined as we moved the elements from right to left. Finally, I have created another for loop (It could be implemented with just one but as you know it is a basic implementation) to “clean” the undefined position and, at the end we need to assign the new array called “temp” to our stack array.

pop() {
  let temp = []
  let deleted = this.stack[this.stack.length-1]
  //Move the elements from right to left
  for(let i = this.stack.length-1; i >= 0;i--){
    this.stack[i] = this.stack[i-1]
  }
  //Clean the undefined item positions
  for(let i = 0; i < this.stack.length; i ++){
    if (this.stack[i] !== undefined) {
      temp.push(this.stack[i])
    }
  }
  this.stack = temp
  return deleted
}

Our next method is called peek which just returns the last item in our stack.

peek() {
  // Return the item at the top of the stack.
  let top = this.stack[this.stack.length-1]
  return top
}

The last method of our basic implementation is a boolean method for identifying if the stack is empty (true) or not (false).

isEmpty() {
  // Return true if the stack is empty, false otherwise.
  return stack.length === 0
}

At this point, you are prepared to test yor stack class with some examples, let’s try a few.

  // Example usage:
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // Should print 3
console.log(stack.peek()); // Should print 2
console.log(stack.isEmpty()); // Should print false

The entire code will be looking like this:

class Stack {
    constructor() {
      // Initialize an empty array to represent the stack.
      this.stack = []
    }
  
    push(item) {
      this.stack[this.stack.length] = item
    }
  
    pop() {
      let temp = []
      let deleted = this.stack[this.stack.length-1]
      //Move the elements from right to left
      for(let i = this.stack.length-1; i >= 0;i--){
        this.stack[i] = this.stack[i-1]
      }
      //Clean the undefined item positions
      for(let i = 0; i < this.stack.length; i ++){
        if (this.stack[i] !== undefined) {
          temp.push(this.stack[i])
        }
      }
      this.stack = temp
      return deleted
    }
  
    peek() {
      // Return the item at the top of the stack.
      let top = this.stack[this.stack.length-1]
      return top
    }
  
    isEmpty() {
      // Return true if the stack is empty, false otherwise.
      return stack.length === 0
    }
  }

Congratulations! Now your are able to reproduce one of the most common used data structures with your favorite programming language.

In upcoming posts I will cover the “Queue” and “Linked list” implementations to continue with the data structure learning.

If you’d like to see the online implementation, I have posted the entire code on codePen.

As far as I know, we are always trying to find a way to become better at something, but sometimes we do not know how to start or how to find good resources in order to become more familiar with this specific skill. If you are a web developer like me (it does not matter if you are new to web development or have a few years of experience; this article is also for you), you may find that the only way to practice programming or frontend skills is by doing or creating. I love reading. You can learn a lot of things from books or articles (such as this one), but the most crucial aspect of coding is consistent practice to develop the muscle memory needed for effective coding.

So now, I’ve compliled a list of resources that I believe will assist you on your learning journey.

1. Frontend mentor

This website allows you to learn HTML, CSS, and JavaScript concepts by solving challenges, and after you finish, you can post them so the community can see your work.

Avalilable at

Frontend Mentor | Front-end coding challenges using a real-life workflow

2. HackerRank

This platform, even used by companies to create technical interviews for developer positions, is one of the most useful websites for training logic and solving a large variety of problems, including data structures, design patterns, and algorithms in languages such as JavaScript, Java, or Python.

Available at

HackerRank - Online Coding Tests and Technical Interviews

3. CSS challenges

As the website says, “Unleash your CSS skills,” it was created with the purpose of improving frontend skills by resolving challenges at different levels (easy, medium, and hard). If you are new to web development, I advise you to start with easy challenges so you can spend less time coding and thinking about the solution, and, after this, you can go to the next problem and measure your progress over time.

Available at

CSS Challenges - Become a Better Web Developer

4. Chat GPT

I cannot discuss training our development skills without mentioning AI tools. Given their increasing importancein the journey of developers, we need to take advantage of the large amount of information they provide. I’m saving generative AI for the end of this post because it requires well-crafted prompts to generate accurate solutions, so, for training purposes, we can try asking something like:

“Please provide beginner-level exercises on data structures in JavaScript” or “What are the most beginner-friendly Java design patterns to start with?”

You might be pleasantly surprised by the answers, so give it a try!

Available at

https://chat.openai.com/

That’s all for today. Happy coding and do not give up, you’ve got this!