DEV Community: Darshan Damre

WebSockets for noobs

Darshan Damre — Fri, 10 Jun 2022 18:09:01 +0000

WebSockets is a bidirectional way of communication between a server and a client.
WebSocket is different from then HTTP. Both protocols are located at layer 7 in the OSI model and depend on TCP at layer 4.WebSocket is designed to work over HTTP ports 443 and 80, thus making it compatible with HTTP. To achieve compatibility, the WebSocket handshake uses the HTTP Upgrade header to change from the HTTP protocol to the WebSocket protocol.

This is how you would create a dead simple web socket server.
I will try to create a web socket server using nodejs.

Install ws using npm.

npm install ws

import { WebSocketServer } from "ws";

const server = new WebSocketServer({ port: 4000 });

server.on("connection", ws => {
  console.log(`new connection`);
  ws.on("message", message => {
    console.log(`Received message ${message}`);
    ws.send(`got your message: ${message}`);
  });
  ws.on("close", () => console.log("closing connection"));

  setInterval(() => {
    ws.send(`Message ${Math.random()}`);
  }, 5000);
});

We can create a web socket client from any browser using the native WebSocket API.

This is how to create a client to connect to our WebSocket server that we opened on port 4000.

We can send message to the server using ws.send().
We also get a response from the server confirming our message.

Thanks for reading!

Three instructors that helped me learn web development

Darshan Damre — Thu, 23 Sep 2021 17:20:36 +0000

I decided to learn web development earlier this year. I knew some HTML, had no idea about CSS and JavaScript.

I started learning javascript by following Hitesh Choudhary's JavaScript playlist on YouTube. I love the way Hitesh teaches, simplifying all the jargon that programmers use so that anyone can understand. I still go back to those videos to revise some key concepts. What I love about his videos is that he also teaches to go through the documentation. Every programmer knows the importance of reading documentation and difficulties while reading it. Thanks to Hitesh for making me understand the importance of reading documentation in my initial days of learning. As a result, I don't hate going through the docs.

You can check out his free JavaScript course on YouTube

Then it was time to learn CSS.

I started learning CSS through online videos and then realized that I didn't understand anything. Later, I came across Kevin Powell's YouTube channel and took his free CSS flexbox course - Conquering Responsive Layouts. I'm so glad I took that course. It made writing CSS so simple and made me understand flexbox. I love the way this course was structured. It is a 21-day course and also includes challenges which makes the course very much interactive. When you sign up for the course, you do not get access to all the course content. Some videos and challenges get unlocked every day. It helps in being consistent and practicing some CSS every day. I remember flexbox used to make me so nervous, and now it is so easy to work with. I am currently learning CSS grid through his YouTube videos.

Making projects is one of the most important parts of learning programming. This is where Tanay Pratap helped me make projects, and the community he has built on his discord server helped me whenever I got stuck in the projects. Now, having some skills in web development, I also help absolute beginners solve their errors on his discord server.

You can check out Tanay Pratap's YouTube channel.

Thanks for reading.

Spread and Rest operator in JavaScript

Darshan Damre — Mon, 30 Aug 2021 17:29:37 +0000

These (...) three dots are called the spread or rest operator depending upon the task it is performing.

Spread operator

In simple terms, it converts an array into its individual values.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers);  // output: [1, 2, 3, 4, 5]

//with spread operator
console.log(...numbers); // output: 1, 2, 3, 4, 5

It can also be used to convert strings into individual characters or objects into individual key-value pairs.

In function calls

Math.max(5, 6, 7);       //result: 7

const nums = [1, 2, 3];
Math.max(nums);         //result: NaN
Math.max(...nums);      //result: 3

Here, Math.max function returns the maximum value. When we have to pass the values in an array, we cannot pass it directly as the function is not expecting an array as the argument. So, we have to pass it using spread operator ...nums.

Concatenate arrays

const numbers1 = [0, 1, 2];
const numbers2 = [3, 4, 6];

const allNumbers = [...numbers1, ...numbers2];
console.log(allNumbers);   //output: [0, 1, 2, 3, 4, 6]

The spread operator makes the concatenation of arrays easier.

Add elements in an array

const moreNumbers = [9, ...numbers1, 11, ...[5]];
console.log(moreNumbers);  //output: [9, 0, 1, 2, 11, 5]

A better way to push elements in an array, as it does not modify the existing array like the push method.
Add elements at the start of the array, without modifying the existing array.

Copying arrays and objects

In JavaScript, arrays and objects are passed by reference. So, whenever a variable defined as an array or object is assigned to another variable. Then, both of those variables point to the same array or object. That means if one array is modified both get modified because they are pointing to the same array.

let letters = ["a", "b", "c"];

let abc = letters;

abc[0] = "z";

console.log(letters);  //output: ["z", "b", "c"]
console.log(abc);      //output: ["z", "b", "c"]

In the above example, the letters array is defined and then it is assigned to the abc array. So, when abc array is modified letters array gets modified too.

let letters = ["a", "b", "c"];

let abc = ...letters;

abc[0] = "z";

console.log(letters);  //output: ["a", "b", "c"]
console.log(abc);      //output: ["z", "b", "c"]

Creating a copy of an array gets easier with the spread operator. Using let abc = ...letters makes a copy of an array instead of passing reference of the same array. The same goes for objects in JavaScript.

Merging objects

const obj1 = {
  red: "apple",
  green: "grapes",
};

const obj2 = {
  yellow: "banana",
};

const fruits = { ...obj1, ...obj2 };
console.log(fruits);
//output:{ red: 'apple', green: 'grapes', yellow: 'banana' }

Like concatenating arrays, the spread operator can also be used to merge objects.

Rest operator

Rest operator is used while defining functions. It does the exact opposite of spread. It takes the values passed as arguments in a function and converts them into an array. This is not the same as arguments object in JavaScript. Methods like forEach(), reduce(), map() do not work with arguments object.

function add(...args) {
  let sum = 0;

  args.forEach(value => {
    sum += value;
  });

  return sum;
}

console.log(add(2, 3, 4, 5, 6)); //output: 20

In the above example, the arguments passed while calling the add function get converted into an array because of the rest operator used while defining the add function. Then we loop through the args array and calculate the sum.

function print(first, second, ...rest) {
  console.log(first);
  console.log(second);
  console.log(rest);
}

print("q", "w", "e", "r", "t", "y");

Output:

Given above is another way of using the rest operator, the first two arguments that are 'q' and 'w' are assigned to the variables first and second respectively. And the remaining arguments form an array defined as rest.

Incorrect Usage

function doSomething(first, ...middle, last) {
  // do something
}

When I first learned about the rest operator, I used it incorrectly and couldn't figure out the error. The above code sample is a mistake a lot of beginners make. The rest parameter must be the last in the function definition.

Thanks for reading.