Forem: Khusharth A Patani

5 must-know Javascript array methods

Khusharth A Patani — Tue, 30 Jun 2020 17:52:38 +0000

Arrays are somethings that are used a lot in the programming world. In javascript, arrays have a lot of powerful methods that we can use to iterate, add, remove, or manipulate the data according to our needs. We will be seeing some of them in this post.

1. forEach()

This method is used when we want to iterate over the same array. The method executes a function for every item present in the array. It does not return anything by default.

Syntax:

array.forEach(function(currentElement, index, arr) {
    // do something
}, thisValue)

Parameters:

currentElement: The value of the current element in the loop.
index : The index of the current element.
arr : The array on which forEach() method is called.
thisValue : Value of this keyword.

Example:

const snacks = [
{ id: 1, name: 'Burger', price: 60 },
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

snacks.forEach(function(snack) {
    console.log(snack.name); // Output: Burger, Pizza, Sandwich 
});

2. map()

This method receives a function as a parameter and returns a new array as an output. The function is called once for every element present in the array.

Syntax:

array.map(function(currentElement, index, arr) {
    // do something and return a new array
}, thisValue)

Parameters:

Same as forEach method.

Example:

In the following example, we can use the map method to create a new array having only the names of the snacks in it.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 50}
]

const snackNames = snacks.map(function(snack) {
    return snack.name;
});
// Output: snackNames = ['Burger', 'Pizza', 'Sandwich']

3. filter()

The filter method as the name suggests is used to filter an array based on a condition we provide to the method and in return, it creates a new array that satisfies our given condition.

Syntax:

array.filter(function(currentElement, index, arr) {
    // return a new array with elements that satisy a condition
}, thisValue)

Parameters:

Same as forEach method.

Example:

In the following example, we can use the filter method to filter out snacks that have a price of more than 50.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const filteredSnacks = snacks.filter(function (snack) {
    return snack.price > 50;
});
/* Output: [
{ id: 1, name: 'Burger', price: '60'},
{ id: 2, name: 'Pizza', price: '100'},
] */

4. reduce()

This method executes a provided function for every value present in the array and this function is also called a reducer function as it reduces the array into a single value in the end.

Syntax:

array.reduce(function(total, currentElement, index, arr) {
    // reduce the array to a single value
}, initialValue)

Parameter:

total : It is the total of all the return values we get on each function call and it's initially set equal to the initialValue.
currentElement : The value of the current element in the loop.
index : The index of the current element.
arr : The array on which reduce() method is called.
initialValue : It is the initial value used for the first parameter (here total) of the function.

Example:

In our example, if we want to get the total of the price of all the snacks present in our array we can use the reduce() method.

const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const totalPrice = snacks.reduce((snack, currentTotal) => {
    return snack.price + currentTotal;
}, 0); // 0 is used to initialize our total to 0

console.log(totalPrice); // Output:  200

5. includes()

This method is used to determine if an element is present in an array or not. If the element is present it returns true otherwise it returns false .

Syntax:

array.includes(element, startIndex);

Parameters:

element : The element to search for.
startIndex : Index of the array from where you want to start.

Example:

const numbersArray = [10, 20, 30, 40, 50];

console.log(numbersArray.includes(10)); // Output: True
console.log(numbersArray.includes(100)); // Output: False

Behind the scenes of the internet: How the web works in 5 simple steps.

Khusharth A Patani — Tue, 30 Jun 2020 16:21:31 +0000

Whenever you type some website URL in your web browser like www.google.com or post a story on Instagram or even check your email you are using the internet in one or the other way. But how does this all actually work? There are many things that go behind the scene which we will be discussing in this blog by taking an example of visiting www.google.com from your browser.

As soon as you enter the website address (URL) in your browser and hit enter the following happens:

A request is sent to the DNS (Domain Name System) server.
DNS translates the domain name to IP address.
Your browser uses the IP address to send a request to Google servers.
Google server responds with the required files (HTML, CSS, Javascript).
Your browser loads the received files.

Now that we have a high-level view of how the process works we will further discuss each step in detail below:

Step:1 Request sent to the DNS

Lets first talk about the URL we are using to make the request. URL stands for Uniform resource locator which is something we use to tell the browser what we actually want.

http:// (Hypertext transfer protocol): The first part of the URL indicates what protocol the browser will use. A Protocol in simple terms is a set of rules which the browser and the server follow to communicate with each other just like in the English language we have grammar.

www.google.com is called the domain name which actually indicates which servers we are trying to contact. (here the google servers).

Now using the above URL a request is first sent to your ISP which is your Internet Service provider. They are the people who you pay for internet usage. The ISP then forwards the request to A DNS server.

But why is there a need to send a request to DNS?
Think of an example like you want to call your friend. You pick up your phone search his name in the contacts and click on his name to call him. But when you click on his name to call your friend what actually was behind that name was his number which was what was actually used to communicate with him.

In the same way, when we want to communicate to a server (here the google servers) from our computer what actually requires is an IP address. An IP address looks something like 172.168.150.4. So now to get the IP address we will move on to the DNS part.

Step:2 DNS translates the address to IP an address.

Now we know why do we need a DNS but what actually is a DNS?
DNS stands for Domain Name System which is also known as the phonebook of the internet. It acts like your contacts on your mobile phone. When you search for your name in your contacts your phone returns the name with its phone number. In the same way, when we make a request to the DNS server (a server is just another computer) using the domain name www.google.com the DNS finds the IP address for the particular domain and returns it back to us.

Step:3 Your browser uses the IP address to send a request to Google servers.

Now that we have got the IP address of the Google servers we can easily contact it. Now your browser will send a request to the google servers using the IP address from the previous step requesting the google homepage from the servers.

Step:4 Google server responds with the required files (HTML, CSS, Javascript)

Servers have a particular software running on their machines which tells them how to respond when they get a request from a client (here a browser).

In our case, we sent a request to the server requesting the homepage of google to which it responds by sending a copy of the HTML, CSS, and JS file present on the server to our browser which is needed to display the google homepage.

Step:5 Your browser loads the received files

Our browser received 3 different files. Staring from the HTML, this file is responsible for defining the structure of the website that is it just tells the browser which part of the page is a heading, footer, image, etc. No styling is involved in this file. You can also assume HTML as the skeleton of the human body responsible for providing the structure to your body.

The CSS file is responsible for styling the whole website. It the reason you see the different colorful websites on the web. CSS is like the skin and clothes on your body which is responsible for making all of us look different.

In the last comes the Javascript which is like the muscles in a human body which is responsible for your movement and how you respond to different things. This is the programming language developers use to make the website dynamic and interactive my making the website respond to different user actions. For example, when you click on logout on any website mostly a confirmation window appears asking if you really want to log out or not.

Conclusion

This was just a high-level overview of how the internet works behind the scenes. If you are interested and want to learn more about this process I would highly recommend the MDN Docs

Write clean CSS code: An introduction to BEM

Khusharth A Patani — Thu, 25 Jun 2020 13:26:59 +0000

The Problem

It is easy to start working with CSS on a small project but as soon as your project starts getting bigger your CSS starts to look messy and maintaining it becomes a huge problem. To solve this problem we use different methodologies like Atomic, OOCSS, SMACSS, BEM, and more from which we will be discussing BEM in this blog.

What is BEM?

BEM stands for BLock Element Modifier which is a naming convention (a set of rules we follow to name things and here the thing is class names) which helps to write efficient and organized CSS code by making it easier to read, understand and scale.

A classname is BEM follows the following syntax:

.block__element--modifier

Some examples of class names using BEM would be:

* .card {}
* .card__title {}
* .card__button--primary {}

A class name in BEM is made up of 3 parts:

1. Block

It is a top-level component that acts like a parent and can exist independently on the page like in the above example .card is a block. Some more examples can be header, navbar, footer etc. A BEM class name always starts with a block like:

.block {}

2. Element

An element is a part of a block and cannot exist independently which means if we remove the block then there will be no meaning left of the element. The element name is connected with the block using two underscores like :

.block__element {}

In the above card component example __image, __title , __description and __button are all elements connected with the .card block.

3. Modifier

A modifier acts like a flag that we can use on our blocks or elements to create a different version of them or to differentiate them with their regular version. The modifier name is connected with the block or element like :

.block--modifier {}
.block__element--modifier {}

In our above example, we have the --primary and --secondary modifiers which are being used to differentiate between a primary button and a secondary button.

Benefits

It provides a great structure to your CSS code which makes the code easy to read and understand.
As BEM has a unique style to create CSS class names, we won't run into conflicts with other class names.
BEM follows a modular approach that helps to create independent components that can easily be reused in the same project or can also be be used in another project.

Conclusion

In the end, I would highly recommend using BEM for your next project. At the start, it might feel like a lot of extra work to use such big class names for your CSS but all this extra work will definitely help you a lot as your project gets bigger and your future self will thank you for all the extra work you did.