DEV Community: Rajat M

Implement 5 Sorting Algorithms using JavaScript.

Rajat M — Sun, 20 Sep 2020 18:44:20 +0000

Most languages have a built-in method which serves the purpose of trying to sort a bunch of data. The common tendency amongst most developers, especially those who are just beginning their journey, might be to choose this path and avoid writing their own implementation. But, this can end up having unforeseen repercussions in terms of performance. Therefore, it is better to go with a sorting technique that is best suited for your current requirement.

The first 3 sorting algorithms that I cover in this article, have an average time complexity of O(n²). These are ones which are fairly popular, and are much more intuitive in their approach to sort data.

The other 2 have an average time complexity of O(n*log n), and can be bit tricky to comprehend if you have no prior knowledge of recursion. So, I would suggest that you go through this article to understand how recursion works.

In the following sections, I shall give you a brief explanation as to how that particular algorithm goes about sorting data. Then, I give you some pseudocode in case you wish to go ahead and try to implement that algorithm on your own. Finally, I provide a gist for my implementation of the algorithm. I would suggest that you understand the pseudocode before diving into the gist, as that will help you grasp the use case for each algorithm better.

Let’s get started with Bubble Sort, shall we. The space complexity for the algorithm is O(1) and the average time complexity is O(n²).The pseudocode is as follows:

Start iterating through the array, comparing 2 elements at a time.
Swap them as required.
At the end of first pass, the largest number has bubbled to the last index of the array, so ignore the last index in the next pass.
Continue these passes until the array is sorted.

The code for the implementation in JS is as follows:

Note that the second implementation is slightly optimized to handle an array that is almost sorted.

The next sorting algorithm which has a time complexity of O(n²) is Insertion Sort, it also has a space complexity of O(1). This is most useful when there is a scenario wherein you are receiving a series of numbers in real time, and need them in a sorted array.

The main concept to understand when using this technique is that, there is a portion of the array that is always sorted and a section that remains unsorted.

Start by comparing the 2nd element with the 1st element, swap if necessary.
Iterate through the rest of the array. Then, for each element, iterate through the sorted portion of the array, and insert this element where it needs to be, by making comparisons.
Keep doing this until all the elements have been inserted into their correct positions.

The code for the same is as shown below.

Selection Sort is the last sorting algorithm to have a time complexity of O(n²), included in this article. The space complexity is the same as the previous two techniques i.e, O(1). The pseudocode for this algorithm is as follows.

Assume that the first element is the smallest. (Or largest, if sorting in descending order).
Find the minimum value from the array and swap this with the first element of the array. This completes one pass, wherein the smallest element of the array is now at the 0th index.
Repeat this procedure for the rest of the array elements, but for the next pass do not compare the element we just placed at the 0th index.

This is usually not that useful in most situations, but still helps a beginner grasp the concepts of implementing an algorithm to solve a problem.

My implementation is as follows. Note that the sorted array is built up from the 0th index.

You may have noticed that it is quite difficult to get a performant sorting algorithm using these techniques. Hence, in order to have an algorithm that is better than O(n²) in terms of time complexity, we have to use recursion.

The next 2 techniques can seem less intuitive at first go. So do read the pseudocode before you jump to the code, in order to make sense of the procedure followed!

Both of them have an average time complexity of O(n * log n). Their space complexities varies depending on the technique.

Let’s take a look at how merge sort is able to use recursion to implement an algorithm with a better time complexity.

The main concept here is that an array with size 0 or 1 is inherently sorted. This means that if we are able to split our array into smaller subarrays of size 0 or 1, and merge them correctly, we have sorted our array!

So there are two things that we need to do before we can implement merge sort. We need to find a way to divide an array into halves continuously, until we end up with arrays of size 0 or 1. Then, we merge them in a way that results in a larger (but still sorted) array.

The pseudocode to continuously divide an array, and end up with a bunch of arrays of size 0 or 1, is as follows.

We use recursion to do this. Use slice() to halve the array, and do this until the base case of arr.length ≤ 1 is reached.

Now, let’s tackle the issue of merging two arrays (of size≤1) such that we end up with a sorted array.

Start by making an empty array.
Compare the first elements of the 2 subarrays, and push the smaller of the two, to the the new array.
Suppose 1st element of 1st array is smaller, then push that to the new array. Now compare the 2nd element of the first array to the 1st element of the 2nd array, and so on.
If we have exhausted the array elements in any of the 2 subarrays, then just push the other subarray to the new array we had created.

See the image below to see how this technique needs to work.

Note: The middle element is colored red.

The code for the merge sort algorithm is as follows. Note the use of helper function to implement the merging of 2 subarrays, and it is pretty evident that the space complexity for this algorithm is O(n).

Lastly, let us see how quick sort justifies its name and goes about sorting an array.

It works by choosing a pivot element, and making sure that all the elements to the left of the pivot element is less than the pivot(not necessarily sorted, they just need to be less than the pivot) and that all the elements to the right of the pivot are all greater than it.

The only 2 tasks we need to do in order to implement quick sort’s algorithm is to correctly identify the index for the pivot and place the pivot element at that index. Initially, we assume the pivot to any element in the array, in this example I shall consider the 0th element to be the initial pivot.

The pseudocode to correctly return the index for the pivot element is as follows. Note that this is also called the partition function.

Choose a pivot, store its index in a variable, let’s say pivotIndex. Loop through the array, if the current element is less than than the pivot, then increment the pivotIndex, and swap the current element with the element present at the new pivotIndex
After one iteration through the array, swap the pivot with the element present at the pivotIndex

Once you have a helper function to do the above task, we need to recursively place all the pivot elements in their correct positions. The pseudocode to so that is as follows.

Assume left indicates the start of a subarray, and right indicates the last index of the subarray.
Do the following only if the left pointer is at a lesser index than the right pointer:
- Start by calling the partition() on the entire array by defaulting the left and right pointers to the first and last element of the array respectively.
- Then store the return value in the pivotIndex
- Use this to recursively call quickSort() with the same array, but from left up until (pivotIndex - 1), for the left part of the array.
- For the right part of the array, call quickSort() again, with the same array, but from (pivotIndex + 1) upto right
Once the base case becomes invalid, it means that left equals right, so we return the array.

The video shows a visualization of quick sort algorithm. The pivot elements are colored yellow.

The code for implementing quick sort in JavaScript is as follows. Note that the space complexity is O(log n).

Now that you know how to implement these 5 sorting algorithms, the next step is to understand which technique works best for the situation you find yourself in. To see some regular use cases, you can checkout this article.

Understand Life Cycle Methods in React.js

Rajat M — Sun, 13 Sep 2020 18:30:13 +0000

To build a project using React, the first step is to figure out the various Components that are required to bring your project to life! Once you are able to visualize the client-side of your project as a collection of Components, half the battle is won. So it is fair to say that Components form the crux of any React application.

But how does a collection of Components end up becoming a single page application? This is no different to the way every single website is rendered by your browser i.e, by creating a DOM. But in case of React, the Components are first woven into a Virtual DOM and only the necessary modifications are made to the real DOM. In order to do this, React must constantly keep track of every Component built for the project, and this is where we come across the life cycle of a Component.

The following article provides a more elaborate explanation of how a browser renders a web page after creating the DOM. You can check it out if you need some more clarification!

How the browser renders a web page? — DOM, CSSOM, and Rendering | by Uday Hiwarale | JsPoint | Medium

Uday Hiwarale ・ Oct 4, 2020 ・
Medium

A Component undergoes 3 phases in its life cycle. Think of it as milestones along the course of a Component’s life.

Mounting: This is the stage where the Component is inserted into the DOM. This phase is accounted for using the componentDidMount() method.
Updating: This is the stage in which the Component’s state and props can change, leading to the process of re-rendering the Component with the updated state/props.
Unmounting: This is the final stage of the Component’s life, in which it is removed from the DOM.

Note that sometimes there is another stage which is considered even before a Component is mounted. This is called the Initialization stage, where the Component’s initial state is set. Hence, it is common to see images that depict 4 stages in a Component’s life cycle.

Now let us dive a little deeper into the life cycle methods which can be applied to a Component at various phases. Note that I am deliberately excluding certain deprecated methods.

Before we start learning about the different methods available, it’s better to understand the role that they play.

It is very straight forward too! These methods are like checkpoints along the way. They are invoked only at the very specific phases of a Component’s life cycle. This way, we have more control over a Component’s behavior, which in turn gives us a more flexible approach to building the UI using those Components!

Take a look at the image below, which shows the various methods and the points at which they are invoked.

Let us go over some of the most commonly used life cycle methods, along with examples.

constructor(): This is used only if you have a class-based Component and it serves the purpose of initializing the state of a Component. In case of functional Components, the useState() hook is used to do the same.

Consider an example in which you are creating a Component to store Todo tasks.

ComponentDidMount(): As seen from the image in the previous section, this is invoked after a Component is inserted into the DOM for the first time. This has a variety of uses, one of which can be to update state after a Component is mounted, like the example shown below.

render(): This is the method that is responsible for inserting a Component into the DOM. This is invoked every time a Component’s state/props is updated.

Now let us take a look at the life cycle methods which are invoked during the updating phase of a Component.

shouldComponentUpdate(): This is invoked immediately after a Component’s state or props is updated. Although most changes are dealt with using the componentDidUpdate() method, this is often a more immediate way of dealing with the change. To take a look at a possible scenario where this comes in handy, you can go through this article.
componentDidUpdate(): This is the method invoked after re-rendering an updated Component. This method can give you the information about a Component’s previous state and previous props. A fair warning to give before you start using this method is to never directly set the state of a Component within it. Doing that will change the Component’s state, futher triggering a componentDidUpdate() and so on.
This article provides some safe use cases for this life cycle method.
getSnapshotBeforeUpdate(): This is used only when the developer requires more data about the DOM before the Component was updated and re-rendered. Although this is seldom used, the this article does a very good job of providing an explanation for an important use case.
getDerivedStateFromProps(): Again, this is a method that is seldom used. I have never come across a scenario which required the use of this specific method, and the team at React seems to agree!

Finally, the only method to deal with the unmounting of a Component.

componentWillUnmount(): This is invoked just before a Component is removed from the DOM. This is where you can perform any cleanups that need to be done such as invalidating timers, canceling network requests, removing event listeners, and so on.

These are the methods that you are most likely to come across. But as I mentioned earlier, I have omitted certain methods that are deprecated or are set to be deprecated in the very near future. So, in case you run into a legacy system which uses some of the deprecated life cycle methods, you may need to do a bit of Googling!

Lastly, in case you are working with a functional Component, and are having trouble with implementing some of the methods discussed, you can go through the following article.

React useEffect : A hook to introduce lifecycle methods in functional components | by Divya Biyani | Medium

Divya Biyani ・ Feb 9, 2021 ・
Medium

What Are RESTful Routes and How to Use Them?

Rajat M — Sun, 06 Sep 2020 17:56:55 +0000

Chances are that you have already heard about REST APIs even before you stumbled upon this article. But maybe you never fully understood what that meant, or as to why it is used so frequently. The crux of the matter is that, it is just a set of constraints in API design.

But why would this be necessary? Can’t an API endpoint have any pattern a developer wishes to keep? After all, an API is just an interface for data transfer, it would work regardless of the pattern of the server requests, as long as it correctly matches the API design. Right?

In case you had this dialogue with yourself, you would be right. But you would also have to deal with the server security issues, portability issues, platform-compatibility issues and scalability issues among other things! So it is a wiser choice to choose RESTful design for your API. Apart from all these advantages, REST APIs can provide a sanity check for most developers since it makes it easier to collaborate.

I hope that I have managed to convince you that RESTful routing is essential, now let us see what the fuss is all about!

Let us first understand why it is called RESTful routing in the first place. Note that ‘RESTful routes’ and ‘REST API endpoints’ are used interchangeably when trying to describe the concept. Here REST is an acronym for Representational State Transfer. Before we can understand what this means, it’s important that you have some basic understanding of how clients and servers communicate.

The gist of the client-server architecture is that a browser (client) is able to send multiple requests to the server. Here, the server needs no information regarding the client itself, hence it also termed as a stateless transaction of data. This implies that the server will send a response corresponding to the current state of the client. RESTful design leverages this concept to simplify API design!

TL;DR - it is called RESTful design because the client initiates a change in its state through a server request sent using a representation of its current state.

To simplify it further, RESTful routes are a standard set of rules that are used to carry out the CRUD operations, by using a set of HTTP verbs to make server requests.

If you feel like you could use some more information regarding the client-server architecture, you can find it in the following article.

Stateless Over Stateful Applications | by Rachna Singhal | Medium

Rachna Singhal ・ Apr 8, 2019 ・
Medium

If the previous section seemed a tad bit confusing, it’s completely fine to ignore the unnecessary details, and just learn about the implementation alone, as long as you understand the steps involved in the actual API design.

In a REST API, there are just seven endpoints to perform any of the CRUD operations. They all use a HTTP verb to perform server requests based on the operation needed. An acronym that can help you remember all these routes, in the order that they need to be declared is INCSEUD (ink-say-ud).

Consider an example wherein you are creating a CRUD application by using MongoDB to maintain a record of all the dogs you have (why not). Refer the table to take a look at the 7 RESTful routes.

Index: This is the API endpoint that will return all documents stored in a particular collection. In order to make use of this endpoint, you will need to make a GET request to the server.
New: This is an endpoint that is used to display a form, which is used to fill the data as per the Document Schema. Note that this route does not add new documents to the collection yet.
Create: This is the route that is meant to add a new document to the collection. You would need to make a POST request to send data to this API endpoint.
Show: This is the endpoint that returns a particular document in JSON format.
Edit: This will display a form to update a particular document. You can use the SHOW route to fetch a particular document’s data and use that to pre-populate the form fields. Note that this will not make any changes to the collection yet.
Update: This is used to update the document of a particular id, by making a PUT request to the server. This will not return the updated document, instead it is common to redirect a user to the SHOW page of the particular document.
Destroy: This will delete a particular document from the collection, by making a DELETE request to the server. After this process, it is common to redirect a user to the INDEX page.

In case you aren’t familiar with MongoDB or the Mongoose ODM, you can go through this article, which gives an introduction to the topic.

The best way to grasp the importance of these RESTful routes, is by building a CRUD application using them. To do that using Express.js and MongoDB, you can take a look at the following article.

How To Build Simple RESTful API With NodeJs, ExpressJs And MongoDb | by David Inyang-Etoh | Medium

David Inyang-Etoh ・ Jul 11, 2019 ・
Medium

In case you prefer a video tutorial to better understand the workflow involved in creating a REST API using Express and Mongo, you can check out this video from Traversy Media.

That’s it! You now know what a RESTful API means and what the 7 RESTful routes are. You also have a few resources to go ahead and build one yourself. It is a very important concept in full stack development, but all you need to build is a single CRUD application in order to learn it thoroughly!

Lastly, consider going through this article to take a look at some best practices for building a REST API of your own.

What Are Service Workers and How to Use Them?

Rajat M — Sun, 30 Aug 2020 19:16:32 +0000

What is a web application? An app that can be accessed only through a browser? An app that cannot replicate the rich offline experience that a native application can provide? Or, an app that requires a constant internet connection to work properly?

In case you agree with any of these answers, this article will be a huge revelation for you! But as most of us already know, a modern web application can do so much more than just running a few scripts on the browser to display HTML.

It can cache content so that it can be accessed offline. It can be installed just like any native app, to provide all the rich experiences of a native app. It can push notifications to its users and also provide a periodic background sync for data backup!

This is where service workers come into the picture! Put simply, a service worker is a JavaScript file used to cache certain assets of your application.

It works by allowing a developer to control how network requests are handled by the app. Before we start with the code involved, let us learn about the lifecycle of a service worker, which will make it easier to understand how an app’s assets can be stored in cache.

Note that we make use of ES6 Promises to implement service workers, and in case you aren’t aware of the topic, you can go through this article I had posted a while back.

What Are JavaScript Promises?

Rajat M ・ Aug 23 '20

#javascript #es6 #webdev #beginners

There are a few steps involved in getting a service worker up and running, and they are referred to as the life cycle of the service worker. This image displays the simplified version of the various stages involved.

Note that each step is asynchronous. Here, the 3 major milestones are:

Installing a service worker: This includes registering a worker. Doing so will in turn cause the browser to start installing the service worker in the background. In this step, most of the static files are cached successfully. In case you are curious as to where you can find the cached assets, open the Application tab of the Chrome DevTools, as follows.

Activating the service worker: This step is mostly used to delete an older version of the service worker. You would want to do this when you have updated some assets of your app, and you want the service worker to cache the newer assets*,* after deleting the older ones.
Fetching the required content from cache: This step will be responsible for fetching the cached assets, in order to allow an app to function offline. This step usually takes place whenever a network request is made and the required data has already been cached.

We now know that a service worker has to follow certain steps before it can help us convert our web app into a Progressive Web Application. So let’s start writing some code to do the same.

Start by creating a file called worker.js or sw.js in the root of you project. It is easier if your index HTML file is at the same level as your service worker file.

First, you will need to register a service worker. You can choose to do it in a separate file and link it to the index.html (Or, the main HTML file in the root of your project). But you will often see a service worker being registered in the HTML file itself, within a <script> tag.

<script>

if ('serviceWorker' in navigator) {
    window.addEventListener("load", () => {
    navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log("Service worker registered"))
    .catch(err => console.error(`Service Worker Error: ${err}`));
    });
} else {
    console.log("Service Worker is not supported by browser.");
}

</script>

Here navigator is an object which has methods and properties about the application running the script.

The other steps are done within the sw.js file. In order to do that, we will be adding several event listeners to the window object.

Suppose we have a very simple app with just 3 files index.html, index.css, script.js. Then we will need to add the following lines of code to the sw.js file.

const cacheName = "v1"; // Can be any string

const cachedAssets = ["index.html", "index.css", "script.js"];

// Call install event
self.addEventListener("install", (e) => {
    e.waitUntil(
        caches
        .open(cacheName)
        .then((cache) =>
                cache.addAll(cachedAssets);
            })
        .then(() => self.skipWaiting())
    );
});

Here you can see that we need to store the assets (files) that we need to store as cache, in an array and attach an install event listener to the window object (self / this). Once the event is fired, a new cache folder is created by the name cacheName v1 and the different assets are added to it.

The next step of the process is to add an activate event listener to the window object, and to check if the current cache v1 is the latest version available. To do so, copy the following code in the sw.js file.

// Call activate event

self.addEventListener("activate", (e) => {
    // Remove unwanted cached assets
    e.waitUntil(
        caches.keys().then(cacheNames => {
        return Promise.all(
            cacheNames.map(cache => {
            if (cache !== cacheName) {
                return caches.delete(cache);
                }
            })
        );
        })
    );
});

Here, we are accessing the various cached assets stored. In case you want to test it out yourself, try commenting out the above lines and changing the cacheName to v2 , before saving the file. You will see that there are now 2 sets of cached assets, namely v1 and v2

This will end up consuming a lot more storage on the browser unless we delete the unwanted assets cached under a different cacheName. This is where the activate event listener comes in handy.

Once the event is fired, all the keys of the caches object are obtained. These are nothing but the various cached assets under the name v1 , v2 and so on. These cacheNames are then compared with the current cacheName, and if they do not match, that particular set of assets is deleted from the cache storage!

Finally, the most vital step of the process is to fetch assets from cache storage. This is done by attaching a fetch event listener to the window object, as shown below.

// Call fetch event

self.addEventListener("fetch", (e) => {
    e.respondWith(fetch(e.request)
                    .catch(() => caches.match(e.request))
                    );
});

The way that we have set up our service worker is pretty simple, hence the process of gathering cached assets, whenever a network request is made from the app is also pretty simple.

All that we do in this step is wait until the fetch event is fired, after this, we first try to access the required assets by making a network request. We perform the network request using the fetch() API (Do not confuse this with the event listener we have set up).

But in case the app is offline, the fetch() API will not return the required data. This allows us to return the cached assets as the response to the app’s original request. This will ensure that even though the app is offline, no error occurs when making a request for a cached asset!

At the end of all 3 steps, your sw.js file will be looking like this.

This was just one method of creating a service worker, but if you want to cache every page of your app, then modify your sw.js file as follows.

You will notice that most of our work is now being done after the fetch event is fired. This is because we are now adding every page we visit to the cache storage, by making a clone of all the assets required to render that particular page.

Although this seems like a pretty easy fix for caching the assets required for any app to function offline, this isn’t a one stop solution for all you caching needs! You will need to vary your service worker depending on the needs of your application.

Lastly, in order to test if your app registers a valid service worker, you can take a look at the Service Workers section under the Application tab of the Chrome DevTools. To test if your app works offline, check the option that states offline and refresh the page.

What Are JavaScript Promises?

Rajat M — Sun, 23 Aug 2020 18:36:54 +0000

If you have never heard of Promises in JavaScript, chances are that you have experienced what is often termed as callback hell. Callback hell is referring to the situation wherein you end up having nested callbacks to the extent that the readability of your code is severely hampered.

If you have never experienced callback hell, let me give you a glimpse of what it looks like. Brace yourself and try to understand what the following piece of code is trying accomplish!

Okay, to be fair, this might have been a slightly exaggerated example. But, it proves the point that attempting to nest callbacks can drastically reduce the readability of your code.

In case you are wondering as to why you should bother about the readability of the code you write, then take a look at the following article which provides an in-depth answer to the query.

Psychology of Code Readability. By no means should this be regarded as… | by Egon Elbre | Medium

Egon Elbre ・ Jul 21, 2018 ・
Medium

Now that you realize that callback hell is notorious, let’s also briefly take a look at what causes a developer to fall into this trap in the first place.

The main reason we use callbacks is to handle asynchronous tasks. Many a times, this can be because we need to make an API call, receive the response, convert it to JSON, use this data to make another API call and so on. This can seem like a problem that’s innate to JavaScript, because the nature of these API calls in asynchronous by default, and there seems to no workaround.

This is where JavaScript Promises come into the picture, because it is a native JavaScript feature released as part of ES6, meant to be used to avoid callback hell, without having to break up the chain of API calls into different functions.

A Promise is an object that can be returned synchronously, after the completion of a chain of asynchronous tasks. This object can be in one of the following 3 states:

Fulfilled: This means that the asynchronous tasks did not throw any error, and that all of them have been completed successfully.
Rejected: This means that one or more tasks has failed to execute as expected, and an error has been thrown.
Pending: This is like an intermediate state, wherein the Promise has neither been fulfilled nor been rejected.

We say that a Promise is settled, if it is not in a pending state. This means that a Promise is settled even if it is in a rejected state.

Promises can help us avoid callback hell, because they can be chained using .then() any number of times.

.then() is non-blocking code. This means that the sequence of callback functions can run synchronously, as long the Promises are fulfilled at every stage of the asynchronous task.

This way, no matter how many asynchronous tasks there need to be, all we need is a Promise based approach to deal with them!

This can work because instead of immediately returning the final value, the asynchronous task returns a Promise to supply the value at some point in the future. Since we have no code that blocks this operation, all the asynchronous tasks can take place as required, and the Promise that is returned will reflect whether or not they failed.

By now, you understand what a Promise is. But how do you use them? Let’s deal with that in this section.

Consider an example which uses plain old callbacks, which we can then convert to a Promise based approach.

As you can see, although this is a contrived example, it is pretty tricky to follow the chain of function calls as the number of callbacks increases. Now, if we chain all our callbacks to the returned promise itself, we can end up with the following Promise chain.

Here, we assume that the demoFunction returns a Promise after it is invoked. This Promise eventually evaluates to either a valid result, or an error. In case the Promise is fulfilled, the .then() statement is executed.

It is important to note that every .then() returns a new Promise. So, when the demoFunction returns a Promise, the resolved value is result1 which is used to invoke the next function in the chain, the firstCallback(). This continues until the final callback is invoked.

In case any of the Promises get rejected, it means that an error was thrown by one of the callbacks. In that case, the remaining .then() statements are short-circuited and the .catch() statement is executed.

You may notice that a single .catch() is needed to act as a error fallback, whereas in the previous version of the code, we had to provide failureCallback function as a fallback error handler, to each callback function call.

This way, you can easily convert a series of nested callbacks into a Promise chain.

Until now we have learnt a new way to deal with callbacks using Promises. But we haven’t discussed where we get these Promises from. In this section, you can learn how to convert any function, such that it returns a Promise which can be chained to a list of .then() statements.

Consider the following example wherein we have a function which doesn’t return a Promise, hence it cannot be included in a Promise chain yet.

setTimeout(() => callbackFunc("5 seconds passed"), 5\*1000);

Here, although the callbackFunc has a very low chance of throwing an error, if it does do so, we have no way to catch the error.

In order to convert this function into one that returns a Promise, we can use the new keyword as follow:

const wait = ms => new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    };

    wait(5*1000)
        .then(() => callbackFunc("5 seconds"))
        .catch(failureCallback);

Here, wait represents a function which returns a new Promise every time it’s invoked. We can do so using the Promise constructor, which creates a new Promise object. Hence, when wait is invoked by passing a parameter indicating the duration for setTimeout , it returns a Promise.

Once the Promise reaches the fulfilled state, the function associated with resolve i.e, callbackFunc is invoked. If the Promise is rejected, then the failCallback is executed.

To further understand how to create your own Promises, you can go through this article, which provides a more complex example to do so.

The best resource to dive deeper into the various instance methods in the Promise constructor, is the MDN Docs.

Although the approach laid out in this article is a simple alternative to nested callbacks, a newer version of JavaScript (EcmaScript 2017 or ES8) also has a feature to deal with callback hell!

In case you want to look into this feature called async & await, you can go through the following article. Although it is stated as a brand new feature, it is actually just syntactic sugar over the concept of Promises discussed in this article! So, in case you understand the concept of Promises, the ES8 feature of async & await is pretty easy to comprehend.

Javascript — ES8 Introducing `async/await` Functions | by Ben Garrison | Medium

Ben Garrison ・ Mar 22, 2018 ・
Medium

Hopefully, now that you are armed with Promises, you can successfully avoid falling prey to callback hell, the next time you are tasked with handling a bunch of callback functions!

An Introduction to Flexbox in CSS.

Rajat M — Sun, 16 Aug 2020 17:13:38 +0000

CSS is the bane of many developers’ existence, as evidenced by this query on reddit.

But CSS doesn’t really deserve the bad rap that it gets! Although everybody’s reasoning is different, the general consensus is that CSS is hard because it behaves weirdly. One such concept which scares off most beginners, is that of flexbox. But as you go through this article, it will become apparent to you that flexbox is actually a pretty easy concept to comprehend!

Simply put, flexbox is tool to build layouts. It provides a cross browser-compatible method to implement layouts and makes it easier to add responsive design to your application, without you having to explicitly deal with positioning the components of your page.

The only prerequisite to learn flexbox is CSS selectors. In case you need to brush up on CSS selectors, you can go through the following article.

Understanding CSS Selectors. So you want to learn CSS selectors? | by Venky Royals | Frontend Weekly | Medium

Venky Royals ・ Feb 1, 2021 ・
Medium

Just like the box model in CSS, there is something called the flex model, which can help you visualize the layout a lot better.

The main principle of the flex model is that all its content is laid out along two axes, namely a main axis and a cross axis. By default, the main axis refers to the x-axis or the horizontal axis. Likewise, the cross axis refers to the y-axis or the vertical axis.

You might be aware that an outer container acts as parent element, and all the elements nested within a container will act as child elements. In the flex model, this parent element is called a flex container and all its children are called flex items.

The following image gives a concise explanation of the flex model:

Illustration of flex model

Consider the following HTML code, wherein we have a flex container and 4 flex items nested within it.

Example to illustrate flexbox

Now, if we select flex-container and set its display property to flex, all the default flexbox properties are applied to it, as illustrated below.

Illustration to show default flex properties

Let’s take a look at the different properties that are applied when an element’s display property is set to be flex .

flex-direction:This property sets the direction for the main axis and by default, it is set as row. The other options include reverse-row, column, and reverse-column. The following image shows the difference between these four values.

Illustration to show flex-direction

flex-wrap: Wrapping refers to the process of distributing the flex items over multiple lines. This property is set to nowrap by default, as flexbox will try to position all the flex items onto the main axis. The options available under this property are wrap, wrap-reverse, and nowrap.
flex-flow: This is a shorthand property to set the previous 2 properties at once. The order of the properties is flex-flow: flex-direction flex-wrap . The default value is row nowrap.

Up until now, all the properties I listed were used to either set the direction of the main axis, or to allow flex items to be distributed over multiple lines. The following properties are responsible for the alignment of the flex items within the flex container.

justify-content: This property sets the alignment along the main axis. By default, its value is set to flex-start. But there are many more options which will help in the construction of the desired layout, as listed below:

Illustration to explain the different options for justify-content

align-items: This property is used to align the flex items along the cross axis. By default, this property is set to stretch, which indicates that the flex items will fill the container (along the cross axis, of course). Like the ‘justify-content’ property, this too has other options to align the flex items, as illustrated below.

Illustration to explain the different options for align-items

align-content: This is used to align the flex-container’s lines within the container, only when there is extra space in the cross-axis. This is similar to justify-content, but it works on an entire line of flex-items, rather than individual items. The following image illustrates the options available in align-content.

Illustration to explain different options for align-content

Note that align-content will have no effect on your layout in case your main axis has a single line of flex items.

Now, let us take a look at the properties that can be applied to the flex items, which are nested within the flex container.

The ‘order’ property is used to override the default order of the flex items. The default is the order in which they appear in the HTML source. Its value can be set using an integer as seen in the image below.

The flex-items’ order can be seen within the orange boxes

The align-self property is used to set the alignment of individual flex items, along the cross axis. This property will override the alignment set by the ‘align-items’ property.

An example to illustrate align-self

The options that are available in this property are the same as those of align-items and the default is set as auto .

Lastly, there is property called flex, which is a shorthand responsible for setting the flex-grow, flex-shrink and flex-basis properties. You can find a detailed explanation of this sub-property here

Now that you know the basics of flexbox, the next hurdle to overcome is to be able to construct layouts using flexbox.

This resource provides examples of some common layouts found in most modern websites.

But, in case you want to be able to build your very own layout, the best method to practise is by converting a PSD template into a CSS file. This means replicating PSD templates using just CSS flexbox! Doing this will help you instantly spot common design patterns which can be achieved using flexbox, which will in turn strengthen your flexbox skills!

A popular resource for Photoshop templates is dribbble. You can start by taking a look at this list of template designs

Once you are able to build layouts resembling the above templates, you have already overcome your dread for CSS!

Two very useful resources for diving deeper into other CSS concepts include the MDN docs, and the css-tricks website.

What Are Higher Order Array Methods in JavaScript?

Rajat M — Sun, 09 Aug 2020 17:10:54 +0000

If you’ve been programming for any amount of time, you would be familiar with arrays. They are the among the first data structures taught in most programming lectures/courses. For good reason too, because they are pretty easy to work with. But in case you work in JavaScript, using arrays can be made a whole lot simpler with the help of some useful higher order methods!

The reason that these are called Higher Order Methods is that they can accept/return another function. If this seems a tad bit confusing, then it’s important that you understand why functions are first class citizens in JavaScript. It is just a fancy way of saying that functions are just like any other type of data, which can be stored, accessed, passed as arguments and even returned from another method!

The following image does a pretty good job at describing what a higher order function is

Credit: @joelnet on twitter

A quick heads up. These higher order methods will require the usage of callbacks and they will be a lot easier to write, if you are familiar with the arrow syntax of ES6. In case you’re not, you can go through the following section to see what it is. Here’s a pretty basic example:

// normal function definition
function add(a, b) {
  return (a + b)
}

// arrow syntax
const add = (a, b) => (a + b);

You can convert a normal function definition into its arrow syntax counterpart, using the following steps:

Remove the function keyword and replace it with either const or let or var . We can do this because functions are first-class objects in JavaScript. (Note: In case you want an anonymous function, just remove the function keyword and move to step 2)
Next, put an arrow symbol => in front of the arguments’ list, to indicate that the code following it will be the body of the function.
After this, you can type curly braces and write the function body as usual. But, if your function body has just 1 line (the return statement), you can skip the curly braces, skip the return keyword, and just type out the expression that needs to be returned!
For functions with no argument, just leave empty brackets before the => symbol.
const alertMsg = () => alert("This is just an example!")
Lastly, if you are handling just 1 argument in the function, you can skip the parenthesis around it.
const squared = x => (x \*\* 2)

Now that you have brushed up on the arrow syntax, let’s begin to understand some higher order array methods!

forEach(): Think of it as a less verbose implementation of a for loop. It invokes a function on each array element, and its syntax goes like this:

array.forEach((element, index) => {
    // some operations on the element
    // maybe you want to use the index of the element
});

In case you want to see a pretty contrived example, take a look at the following example.

map() : If you’ve understood forEach(), then this is a piece of cake! It functions exactly like a forEach, but returns a new array unlike the forEach() method. The syntax is as follows:

const returnedArr = array.map((currentEle) => {
    // some operation on currentEle
});

It’s slightly different to the forEach() method, but you should be able to use them interchangeably for most applications. In case you want to know about the differences, you can go through this article.

reduce() is especially useful whenever you need to compute a single value based on the data stored in an array. As the name suggests, this reduces an array into a single value, but can be a little tricky to use! The callback function that this method accepts, works on each element of the array in a way that reduces the array to a single value. The syntax is as follows:

const reducedVal = array.reduce(callback, initialVal);

Here, callback needs to take 2 arguments. The first argument acts as an accumulator, whose value persists throughout the process. The second represents the current value of the array.

A simple example can be to find the sum of the array elements.

In the above example, the reduce() method has a callback function called reducerCallback (very creative, I know!). This callback needs to have 2 arguments, I called mine acc and current .

The basic idea is that the value in acc is persisted each time the callback method is executed. This means that if the reducerCallback is executed for the 2nd element of demo , then the values of the arguments acc and current are, 12 and 34 respectively. The callback then adds these two values and returns them. This returned value is now the new value stored in acc

So, for the 3rd callback execution, the values of acc and current are 46 and 54. You can see how the array’s values are being used to get to a single value.

But I also mentioned a second argument called initialVal in the syntax. This is set as the initial value of the acc variable. In case you do not specify any initialVal argument, acc will take the array element at the 0th index as its default initial value.

Here is an article that gives you a verbose explanation about the workings of the reduce() method

4 Practices to Help You Understand array.reduce() | by bitfish | JavaScript In Plain English | Medium

bitfish ・ Feb 18, 2020 ・ 6 min read
Medium

The next method that is used often is filter(). It is very helpful if you want to extract a sub-array from a larger array, based on some common property. The syntax is as follows

const filteredArr = array.filter(callback);

Here callback accepts an argument current which results is a boolean value being returned. Based on the return value, the current value is pushed to filteredArr.

For example, suppose you want to separate the even numbers from a given array.

Here, the callback function is anonymous and it accepts an argument that represents the current element of the demo array. If the callback returns true then item is pushed to the resultant array filteredArr.

Here, for all the even numbers in demo , our callback returns a 0(zero), which is falsy in nature. Hence, all the even numbers are omitted from filteredArr . On the other hand, all the odd numbers return 1(one) which is equivalent to true . This way, our demo array has been filtered!

You can go through the following article to see some more examples.

Learn & Understand JavaScript’s Filter Function | by Brandon Morelli | codeburst

Brandon Morelli ・ Nov 19, 2017 ・ 4 min read
codeburst.io

Lastly, let’s understand a higher order method used most often. sort() is a method that doesn’t quite work like we assume it would!

You would imagine that the following code works by sorting the array in ascending order by default, right?

const demo = [100, 20, 89, 3, 17];
demo.sort();

But, it returns the array [100, 17, 20, 3, 89] . “What? Why?”, I hear you say. Let’s understand why sort() has such a behavior.

sort() assumes that all the array elements are String by default, and sorts the elements based on the UTF-16 code values, in case it is not passed any callback!

This is why 100 will come before 20. In order to sort an array in a more traditional way (i.e, as numbers) we will need to use a callback function as follows array.sort(callback)

The callback needs to accept 2 arguments and return a numeric value indicating how these 2 arguments need to be stored in the sorted array.

Here is an example to sort an array of elements in ascending order:

If callback(a, b) returns less than 0, a comes before b.
If callback(a, b) returns 0, a and b are left at their current index.
If callback(a, b) returns greater than 0, b comes before a

Note that callback(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments.

Here a and b are the 2 consecutive elements of the demo array, which are continuously compared in the callback. Here, if you wanted to sort the array in descending order, all you need to do is change the callback to the following.

In case you want to look at more examples of how to use the sort() method, you can go through the following article.

Demystifying the Mysteries of sort() in JavaScript | by Aphinya Dechalert | Mad HashMap | Medium

Aphinya Dechalert ・ Mar 2, 2020 ・ 5 min read
Medium

All said and done, these methods are a sliver of all the higher-order array methods offered by JavaScript. Although these are the methods that you’ll use on a more regular basis, it is not a futile attempt to go through the rest of the methods!

In case you wish to learn more about any of these array methods, or if you want to learn some more higher order methods, I’d suggest that you go to the MDN Docs, as it provides a pretty thorough explanation of all the methods that JavaScript has to offer.

A Guide to Learn React.js

Rajat M — Sun, 02 Aug 2020 16:38:13 +0000

There is a ton of options when it comes to client side frameworks, and often it can be a little confusing for beginners to choose from the wide range of choices. Often these choices boil down to Angular, React and Vue. “So, which is the best choice?”, you may ask. I can’t help but give you the clichéd answer that there isn’t really a best choice. Just pick one and learn it thoroughly, would be the best advice to give, because all the three choices eventually boil down to very similar working strategies.

In case you have made up your mind to start learning React, I shall do my best to give you a thorough introduction of the same!

One of the reasons why React can seem weird to a beginner is that there isn’t a separation of concerns in terms of writing HTML and writing React code. This can seem awkward for most beginners, because when building any application’s client-side, we usually use a template engine like EJS, Handlebars, Mustache, and so on. So the shift to a client-side library which merges the use of HTML and JavaScript can be a little tough!

The very first concept to start with React is called JSX, which stands for JavaScript XML. Basically, JSX allows us to write HTML within React itself. Although there are a few changes, in order to write JSX (which is what every React component eventually renders) you just need to know the basic tags of HTML!

You can go through the this article from the official docs, in order to familiarize yourself with the concept of converting the HTML tags into JSX code for React to render.

Now that we understand how to write JSX, let’s try to understand how React can help us build the User Interface (UI) of an application.

React (and most other client-side frameworks) primarily work by rendering components. This enables a developer to build one component, and re-use it multiple times as required. This is a powerful advantage over using a template engine, because you no longer have to worry about writing code to build all parts of the UI! To illustrate this, consider the example of Youtube’s homepage.

Notice the repeated use of a similar component

Here, notice how all the video suggestion cards have a similar structure to them. A thumbnail, a title below the thumbnail, the channel name below that, and some more details towards the bottom of the card. Using a client side library like React, you can build a generic component to display all of the above, and re-use that same component multiple times.

To leverage this concept, it is important to start thinking of the UI as a structured collection of components. These components can also communicate with one another asynchronously, which can save you some costly page reloads!

“But, how do I build these components?”, you may wonder. Building components mainly comes down to understanding what you want to render for the user, at that instant of time. If you can visualize the end result before you start writing the code, it can make your job a little easier.

React offers two ways to define the components. You can either choose to build a class-based component, or you can build a functional component. As the names suggest, the former uses the concept of ES6 Javascript classes (if you are not familiar with it, click here to learn about it) and the latter uses plain-old Javascript functions.

In case you aren’t able to decide which type of component you should learn first, I would suggest that you learn about functional components, because it is a little more forgiving towards folks with a lesser knowledge of JavaScript classes. You can go through the this article to write your very first component, be it class-based or function-based.

Now that you are aware of the concept of components, the next important aspect to understand is that of the state of a component.

The state of any component refers to all the data that a component needs to store, in order for it to work as expected. In simpler terms, think of the state as a reservoir of data that every component holds. In case the state of a component changes, React will automatically trigger the component to be re-rendered with the updated state!

There are two ways to set the state of the component, depending on the type of component you choose to build. Although you can just stick to using one type of component for every app, I would suggest that you go through both approaches, as it helps you better judge as to which component is more suited for the current application.

Use the following two articles to set the state for a class-based component and a functional component, respectively.

Let’s take a look at what all we have learnt until now, shall we? We learnt that React renders components. We learnt that the entire UI can be built using various components. We also learnt that the components can have their own state. But how will all our components talk to one another? We will need some mechanism to let the components transfer data to each other, right?

This is where we come across another important feature of React, called props. If you have worked with HTML, this concept is very easy to comprehend. Look at the following tag, wherein we use an attribute.

<img src="some/image.png" alt="sample image" >

Here we are setting properties of the tag, by specifying attributes such as src(source) and alt(alternate text). Similarly, in order to send some data from one component to another, we set them as properties(props) of the component being rendered (the child component).

Another simple analogy to understand props is that of function arguments. They are essential for the proper working of the function, but not all functions need them. Similarly, we can have components(of any type) with and without props.

Illustration to understand state and props

The above image illustrates how React Components are able to use the concepts of state and props. An important detail to understand here is that a component can alter its state, but its props are immutable(read-only). This just means that a parent component is responsible for setting the props of its child component, and the child component cannot change them.

Having said all this, there are can always be a case wherein a component neither needs a state nor props! So don’t assume that every component that you build in React needs to have a state, or that it needs props. You can go through the this article for a more robust introduction to the concept of props.

All the concepts I have listed up until now form the basics of React, but there’s much more to it!

The concepts of React are best understood only after you actually try them out yourself. In order to do that, open the CLI of your choice and navigate to the folder you want to start writing React code in. After you do so, type the following shell command

npx create-react-app <your-app-name>

Note that you will need to have installed Node.js and npm in your local machine, in order to execute this shell command. If not, then go here and download Node. You can check if the installation was complete, by typing the shell command node -v or npm -v which should return a valid version number.

Here, executing npx <command> when <command> isn’t already in your $PATH will automatically install a package with that name from the npm registry for you, and invoke it. In short, it lets you execute a command without having to explicitly download a pre-requisite file/tool for your local machine.

Also, note that your ‘app-name’ must be in lower case and can be seperated by a hyphen. So you can just name a folder as your app-name and run the following shell command npx create-react-app . which creates an app of the same name as your current folder.

Command to create a new React app of the same name as the current folder

This command can take a while to finish downloading all the files. Once it finishes downloading all the files, you can open the folder in a code-editor of you choice, and see a list of files similar to the ones in the below image.

Files downloaded from create-react-app

You can type npm start to test that your react app is up and running! You can follow the steps in the next section to clean up the folder and start writing React code.

In case you want to clean up the folders that create-react-app downloads, you can start by typing the shell command rm -rf .git in the CLI to remove the git repo that create-react-app creates for you. After this, you can start with your own git workflow. Check out this article to learn how to setup a basic git workflow, in case you do not know how to do so.

A Simple Introduction to Git.

Rajat M ・ Jul 26 '20

#git #beginners #webdev

After you do so, you can choose to delete all the files in the public directory, except the files index.html and manifest.json

In the src directory, you can go ahead and delete the files App.test.js , index.css , logo.svg . Unless you want to set up tests for your app, or you plan on converting this app into a PWA, you can also go ahead and delete the files serviceWorker.js and setupTests.js .

Now you have a bare-bones folder with the basic requirements to start working with React. But you can also cleanup your index.html file by deleting the unwanted comments. Note that in case you chose to delete the serviceWorker.js file, make sure that you comment out the following lines from your index.js file.

Comment out the service worker registration line

Also make sure to adjust the imports in the files that are left in your folder, to remove the lines that are trying to import the deleted files!

But, in case you feel overwhelmed by these changes, you can choose not to fiddle with any of these files (i.e, not delete them) and to perform all your changes in the App.js file!

One last feature to understand before you can go ahead and learn the more advanced topics in React, is that of the parent-child relation between the various components. For example, when you bootstrap your React app using create-react-app then only the component from the index.js file is being rendered by React. The index.js file is further invoking the App.js component! This is very important to realize early on, because at the end of the day, any application you build using React, will be a single page application. But that doesn’t mean that you can only render one parent component!

In case all this seems a little confusing, go through the this article to understand the meaning of a single page application.

Lastly, if you feel like a video tutorial with a more hands-on approach to learning will help you learn the basics of React a little better, then do check out this free course. But do note that it does not include the latest concepts of React hooks (i.e, the use of functional components)

Once you feel comfortable with the basic concepts of React, you can go ahead and learn about React Router to integrate it with you current server-side tech stack and build full stack applications. Or you can learn the more advanced topics in React. You can also check out the following article to help you gauge the topics you might need to use!

Concepts to become an advanced React developer | by Dhanraj Acharya | wineofbits | Medium

Dhanraj Acharya ・ Nov 16, 2018 ・
Medium

A Simple Introduction to Git.

Rajat M — Sun, 26 Jul 2020 16:19:09 +0000

It’s a common misconception that Git is only meant to be used by programmers, but the truth is that it is a versatile tool that can be utilized by people from all walks of life. In this post I shall give you an insight as to why Git is essential, why it can be confusing, and most importantly, as to how you can leverage it.

But before we begin using Git, let us understand why we might need to use it in the first place. Sure, it as an essential tool in a developer’s toolkit, but the reasoning behind the usage of Git has to be more than just that it’s a popular tool, right?

An analogy that helped me understand the need for Git was that of snapshots. Imagine that you have started building a personal project. It is something that you have wanted to build since a long time. Eventually you notice that there is more than one way to implement a feature in your project. So you choose one of these ways and trudge along. A week into the development process, you realize that certain decisions in the project’s past are hampering some new features. So you just go back to the problematic section of the project and fix it! A few more days pass by, and your project is nearing its completion. Alas, you run into some more design bugs! This time you notice that there isn’t a simple fix, because this bug is a culmination of a series of flaws in the project.

You start contemplating your options. Do you go back and re-design every problematic aspect of the project, meanwhile risking some unnoticed side-effects? Do you ask for help online? Do you scrap the project? Can you just ctrl+z your way to the point where you wrote the buggy line?

This can seem like a contrived example, but it is a scenario that every developer has faced at some point! In fact, Linus Torvalds has even said that he created Git just to maintain the slightly bigger project he happened to be working on.

This is where you realize the importance of a version control software like Git. As the name suggests, it is something that helps you keep track of the different versions of your project. This is where the analogy of snapshots comes in. Using Git is like maintaining an album filled with snapshots of your work. It makes it easier to pinpoint bugs, because it has a recorded history of all the work that you put in while building the project.

Git has features which also helps a team of people collaborate. If you want to imagine a scenario wherein Git can actually save your life, then revisit the example I gave a little while ago. But instead of you being the only one who is stuck with buggy code, it is an entire team of 10/100/1000 with all of them working on different parts of the project! Calling this situation a nightmare would be an understatement!

Now that we know Git can save us from mental breakdowns, let’s get started with the workflow involved!

The acronym to remember is ISAC. Let me explain.

In order to get started it’s important that you have a working knowledge of a command line interpreter or a CLI. If not, then read the following paragraph to get started with a CLI of your choice. In case you have never used a CLI before, it is just an interface for you to give some commands/instructions to your computer.

On a MAC machine, search for the program named Terminal.
On an Ubuntu machine, press Ctrl+Alt+T.
Once you open the Terminal, you will need to install git from here.
On a Windows machine, I would suggest that you go here and download a CLI called the git bash.

Verify the git installation by typing git --version in your CLI. It should return a number indicating the version of git.

Once you have opened a CLI, navigate to the folder where you want to save your project files, using the cd command as required. Once you are in the root (main) directory of your project (which is yet to be started), you can start with the git workflow using the acronym I mentioned earlier.

In order to allow Git to store snapshots of your code, you need to create an empty, local repository. Think of it like creating an empty backup folder. You do this by typing git init . You should see the text (master) alongside your file pathname, once you execute this command.

If you type ls -a you should see a file called .git, which will now act as you local repo — short for repository.

Now, you can go ahead and create all the files that you need to build your project. Note that the development procedure you follow to build a project is unaffected by the addition of Git to the picture. Once you have created some files in the folder that the git repo was initialized in, go ahead and type git status in your CLI.

You should see statements similar to the one below:

Example for message returned after typing ‘git status’

This message indicates that there are untracked files in our git repository. This just means that the files are not ready to be added to our local git repository yet. In order to continue with our git workflow, we will need to use another git command.

This is where things can get a little tricky to understand, because Git doesn’t directly store our files in a local repository. Instead, it allows the user to add these files to a staging area. “Why?” , you may ask. It is because we might have some local files, that we do not want to store in the local git repository, another reason might be to allow us to split our commits into logical sections rather than it being a block of unrelated changes. If you found this difficult to understand, then refer the first answer to this query on stackoverflow.

Mar 12 '18 Comments: 1 Answers: 6

What is the point of git add . or git add <filename> to add it to the staging area? Why not just git commit -m "blabla"?

I don't understand the value of the staging area.

Open Full Question

In short, when you see that you have untracked files, you need to type the following command to add those files to the staging area
git add <path/filename> or if you want to add all the files at once, type git add .

If you type git status again, you will see a different message!

git status after adding our files to the staging area

Note that if you make changes to any of your files, after you add them to the staging area, then it will have to be added again, because the version of the file in the staging area is no longer the same file in our local environment.

The next step is to transfer the files from the staging area to the local repository. In order to do that, type the following command
git commit <path/filename> -m "a message regarding this commit"
This is where we meet a new Git feature called Commit Messages(Note the -m). They are succinct messages which convey information regarding the files that are being committed.

To understand the importance of these messages, imagine that a year has passed since the time you have finished a project. You decide to go back to it and see the code for the project. Or, more realistically, suppose a team member has to get familiarized with your codebase. In these cases, in order to make sense of why certain changes were made in the files, you will rely on these commit messages, because you no longer have the context for the code you had written.

If you want to commit all the files in the staging area at once, then type the following command
git commit -m "<commit message>"

Since commit messages are so crucial for code maintenance, here are some tips for writing good commit messages:

Type it in present tense, for example Make foo do something , rather than in past tense like Made foo do something
Be concise. Add style to the form is better than Add style to make the form look better and also added a new background color to the submit button

This is what the most basic Git workflow looks like. It’s that simple! Just remember the following commands: Init, Status, Add, Commit.
In order to have a rough overview of the various aspects in Git, see the following image

The workflow that I have mentioned up until now, is the most basic workflow one can follow in order to use Git. But when Git is to be used for collaboration purposes, it is often the case then we need to merge branches, send/accept pull requests, fetch files from another Git repo, checkout a previous version of the project, push our files to a remote repo provided by Github(alternatives include Gitlab, Bitbucket), pull files from the remote repo, clone another user’s remote repo, and so on. But since all these commands are easier to grasp once you have an understanding about the basics of Git, I shall provide resources for you to learn these topics once you feel like you have grasped what Git does.

These are some of the best resources I found:

Learn the Basics of Git in Under 10 Minutes

Gowtham Venkatesan ・ Jul 13 '19

#github #git #beginners #tutorial

Learn git concepts, not commands

Nico Riedmann ・ Jun 2 '19

#git #tutorial #beginners #learning

If you feel like a video tutorial would help you better understand these concepts then checkout this playlist

Lastly, another reason to start using Git is that you can contribute to open source. One of the main reasons why Git is as popular as it is, is the fact that it has allowed hundreds and thousands of developers to collaborate. Hence it is not too much of a stretch to claim that Git is the foundation for all Open Source Software.

A Beginner Friendly Guide to the World of Web Wevelopment.

Rajat M — Mon, 20 Jul 2020 05:07:51 +0000

This article is going to be helpful only if you identify yourself as a beginner, and trust me when I say that there shouldn’t be any shame in doing so.
If you are someone who has toyed with the idea of getting into web development or if you’re someone who knows how to code, but doesn’t know what to do with it, then I shall try and show you the things that can help you in the journey that you’re about to set out on.

First off, let’s get familiar with a few terms. These are jargon that you’ll see in every article about web development.

Web development: It encompasses a lot of technologies that are used to build dynamic applications. To be fair, this term can include a host of other things, but for the purposes of this article assume that every application that you see online, is built using this process.
Front-End: It is the section of the app that a user interacts with, it can also be called as the client-side of any application. It can further include concepts like UI, UX, Layout, Responsive design, and so on. But don’t get intimidated by the previous line, and assume the front-end to be the part of an app that an end-user interacts with, in their browser window.
Back-End: It is the section of the app that is abstracted from the user. Think of it as the stuff that lies behind the front-end, providing the functionality intended for the app that you are building. It’s often also called the server-side of the app.
Full-Stack: You’ve guessed it! It’s a seamless combination of the front-end and the back-end. This is why web development can also be called any of the following terms and still mean the same thing: Full-stack development, Full-stack engineering, Software development, and so on.
Framework and Library: Although they technically do differ, it is a fair assumption to think of them as tools that provide an abstraction over a more complex task, but with their own set of rules that need to be followed in order to use them effectively.
In simpler terms, they allow us to complete complex tasks with lesser code. I would suggest that while using frameworks to accomplish a task, that you also see the raw version of the code, in order to develop an appreciation for the level of abstraction that a framework provides.
API: It is the interface which allows the client-side and the server-side to talk to one another. It’s usually the boundary between various software. So every time you use a full stack app, you are likely interacting with an API.
Database: It just stores data for our application. Majorly of two types, SQL and NoSQL. The difference between the two is very easy to comprehend, so a quick google search should do you justice!

Now that you are familiar with some jargon, let’s also take a brief overview of how a web-based application is able to work. This is something that’s usually irrelevant after you start building the application, but I believe it to be an essential concept to comprehend the general workflow involved in the development process. The following image represents an over-simplified web request-response cycle.

If this image helped you better understand the jargon I mentioned earlier, then that meets the purpose of me including this concept!

If you’ve ever researched as to what are the tools required for you to become a web developer, it is likely that you would have come across hundreds of them! You do not have to know every tool there is! This is a trap that most of us fall into, especially early on in the process of learning. I could rattle out names of at least 50 tools which are used in the development process, but that doesn’t mean that your skill set needs to reflect that.

Here is the part of the article where I shall suggest that you learn so-and-so tech stack to become a web developer in a week! That’s right! Learn this to get a job within a week! That ought to have caught your attention, after all I am going to reveal the secret to become a software developer! or a web developer! whatever you want to call yourself.
But the harsh truth is that there isn’t one. In fact, one of the reasons why there isn’t a one-stop solution for learning web development, is the fact that there are so many tools!

The point of this image is not to scare anybody off, but to illustrate some of the job requirements posted online!
Jokes aside, the most common starting point to learn web development would be the standard trio of HTML, CSS and JavaScript. A brief understanding of these 3 tools can be found below.

HTML: It provides the basic skeleton for the web page and is used to build the structure of the app. It is also instrumental is deciding as to what are the elements that need to be displayed. It is the only language that a browser can covert into a web page. The learning curve for HTML is not too steep, because it doesn’t really include any programming logic per se.
CSS: It is responsible for styling the structure built by HTML. This means that CSS can be used to beautify the bare bones structure built using HTML, by applying a host of properties. The learning curve for CSS can be a little steep, but trust me when I say that you would much rather spend the time to learn CSS at an earlier stage, than struggle with it after the fact! A free resource to learn it can be found here.
JavaScript: This is responsible for adding the functionality to the beautified structure built using the previous two tools. This is probably the first programming language in the list, and is a truly vast topic. So you shouldn’t try and learn it within a few days, but instead spend a significant chunk of time on it. Build loads of mini projects to understand the basics of DOM, event handlers, promises and the other quirks of the language. If you need any more motivation to learn JavaScript, then please click here.

An analogy that helped me grasp the importance of these tools, is that of a humanoid robot. Think of the physical body(structure) of the robot to be made using HTML. Think of the outer appearance(style) to be built using CSS. Finally, think of the actual brain/processor of the robot to built using JavaScript. I know that it’s a contrived example, but it is one that can make it easier to understand the importance of each of the above tools.

Up until now, we’ve been discussing about the tools to build the client-side of the application. So let’s dive into the server-side of things!

This is where it’s totally up to you to decide what you want to use. All I can do is list the various options available to build the back-end of your application. Another common jargon used to describe our server-side is API. So don’t get confused when you see the words API endpoints in some of the tutorials. It just refers to the points of contact between the front-end and the back-end, in order to get/post data.

So, what does our back-end do? It is responsible for retrieving, storing, processing and refining data, so that some useful information can be sent to the client-side, if need be. In order to store the data, the server-side of an application often uses a database of some kind.

The various languages that can be used to build the back-end are as follows:

Python: The frameworks offered in this language are Flask and Django.
Node.js: Yes, you can just use the same language throughout the development process. Some frameworks offered in this language are Express, Koa and Strapi.
GoLang: A very easy language to start off with!
PHP: This is not really the preferred choice nowadays, but is one of the options available. Laravel is a pretty popular PHP framework that’s still around.

I would certainly be remiss if didn’t include at least one of the various client-side frameworks.
But I strongly suggest complete beginners to not bother learning a client-side frameworks, until they are comfortable in building the client-side of their applications using vanilla JavaScript (No, that’s not a rib at the vanilla enthusiasts of the world). Of course, you would still need to use HTML and CSS for the structure and the styling respectively.
This advise can seem naive at first, especially since most developers always seem to be ready to jump into the Angular vs React vs Vue battle, but I say this because it allows us to properly differentiate the perks offered by the framework, from those offered by vanilla JavaScript itself.

Finally in order to deploy your application you can use one of the following tools: Heroku, Netlify, Github-pages. Here deploying is the process of taking the app from working-on-your-local-machine to working-online!

Another important aspect of the workflow involved in the development process is that of a version control system. Think of it as snapshots of your code at different times, which you can refer back to, at any point in the future. It is also helpful in maintaining the codebase. Git is the most often used version-control-system, and it is a very easy tool to learn. Once you feel comfortable working with Git, you can also put up the code for the application you built, on Github (in a remote repository) for easier collaboration.This will also officially make you an Open Source Contributor.

That’s basically it! I’ve given you a rough overview of all the steps involved in the development process. I have deliberately refrained myself from suggesting a specific set of tools because tutorial purgatory is a concept that is better averted than coped with. Check out this article I posted a while back, to understand what I mean by this.

Only you can learn web development!

Rajat M ・ Apr 14 '20

#webdev

Finally, there is a skill that’s probably the most important. But I leave it up to you to find out more about it! May be you can google it, or maybe you can find out more about it on stackoverflow (wink, wink).

Personalize Your Web Wpp with a Favicon, Completely Free of Cost!

Rajat M — Mon, 06 Jul 2020 07:04:41 +0000

It has recently been a complete revelation to me that being a good developer is only half the battle won, if you want your project to stand out from the rest. What matters at the end of your endeavor to build a few personal projects to add to your ever-growing portfolio, is that the project must be presentable. By this I mean that your work should seem polished, and the most basic of things, can actually go a long way in terms of elevating the project you build.

This is where favicons come into the picture. They are essentially the logo that represents your project in a browser’s address bar, or the logo that a user sees when the app is installed on a device (assuming that it’s a Progressive Web Application i.e, a PWA). In this piece, I will list a set of resources that can help you feel the same ecstasy that I felt, when I accidentally stumbled upon the fact that a simple icon can actually improve the presentability of your web application.

Before we begin, it is of paramount importance that the icon that you choose, actually represents what your project is about. This may sound trivial, but it is something that needs to be kept at the back of one’s mind when choosing from a vast list of icon options, because if the icon you choose doesn’t end up as an honest representation of your work, then the favicon shall serve very little purpose.

Okay, let’s dive in!

First of all, head over to favicon.io and see what type of an icon will suit your project the most. This can include an existing emoji, as an example let’s assume that you’re building a really simple weather application, in this case it makes sense to have either the Sun, or the clouds as the favicon, so it’s easy to choose the respective emoji and call it quits, as it makes the entire process ever so simple. If not an emoticon, then maybe you want a simple text-based icon, like that of Medium or dev.to, because it’s relatively simple to customize a text-based icon when compared to an image-based icon. If you are content with either of these cases, then just follow the steps in the next section, and your work’s done!

Once you choose an emoji or finish adding the text, download the various files generated and follow these instructions:

Place those files in the root of your project, which is usually the public directory or the folder which contains your index.html file (i.e. in the main html file of your application)
Add the following link tags to the head of your index.html file, which allows the browser set a new favicon for your project.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest">

Once you do this, your job’s done! It’s that simple. Reload the window, and see the browser tab indicate the icon you just added.

Personally, I would recommend that you go ahead and choose the third option (technically speaking, the first option) of converting a .png file to an icon. But fret not, I will present a complementary free resource that makes this task quite simple. Just in case you choose to create your own icon using a tool like Adobe XD, you can do so, but make sure to export it as a png file. In this case, you can just skip the next part, and upload your file to favicon.io, and after you download the files that are generated, just follow the steps mentioned in the previous section.

But you can skip designing the icon yourself, and just choose from an already existing library of icons from flaticon.com and even customize an icon you like, to better represent the colour palette of your project! Make sure to attribute the designer once you download your icon, since they have basically done all the hard work for you. Be sure to download your icon in the .png format, for it to be compatible with favicon.io

Repeat the process I mentioned earlier, to convert the file into a favicon, and if you feel like the icon needs some tweaking, just repeat the entire process within a couple of minutes, until the icon is just the way you want it to be!

For example, below is the icon I chose to add as the favicon for a blogging application that I built. It’s clearly not the most eye-catching, but just about gets the idea of the app across.

Of course, these are not the only tools that you can use in order to set up your very own favicon, there are other free resources out there, that do provide very similar functionalities, and you will eventually stumble upon them! So if there’s one takeaway from this post, let it be the fact that there are many ways to get to the same outcome, and it’s only a matter of personal preference, so try finding innovative solutions to any problem at hand, and keep sharing your findings!

Only you can learn web development!

Rajat M — Tue, 14 Apr 2020 08:20:10 +0000

This post is for anybody looking to finally take up web development. Be it as a hobby that you hope to turn into a career, or to just code, because you love to code but don't really know what to do with it. But it is relevant to anybody who is a developer.

So you start searching for ways to learn this new thing that has peaked your interest, but you quickly realize that there are virtually thousands upon thousands of video lectures, Udemy courses, Coursera courses, edX courses, well you get the point, and you are lost within the tremendous pile of content that you've decided to throw yourself into. So you may choose to back off a little and see what google suggests you learn first. But once you start doing that, you're rapidly slipping into the rabbit hole that is the endless stream of requirements that google searches tell you to acquire before you can call yourself a web developer.

So after a couple of hours, you turn to the good old trusty Youtube suggestions to see if there's a comprehensible video from a fairly popular source that can help you navigate these confusing waters that you find yourself in, and to be fair there is a ton of videos freely available on Youtube, that can concisely tell you what you need to do, but the problem here is that you don't really know which advice to follow.

So after a day's worth of research you've decided that you'll follow a tutorial you found on Youtube to build your first dynamic web application, using either Flask or Django or Node.js or Ruby on rails, and I digress. But at this point of time you have no clue what any of these jargon mean, so you just follow along with the tutorial of choice and manage to build the exact same app as the instructor, albeit on your local environment. You are thrilled! You feel a sense of achievement! You feel like you've done the most important part of the process of learning web dev, you've built something!

But, then, you see this video pop up in the suggestions that is also claiming to be beginner friendly, it also has a good number of views on it, and it has positive comments about it helping people learn easily. So onward you go, you click it, follow that tutorial for the next couple of days, and once again, you've done it! You have managed to replicate the app in the tutorial. The obvious question to ask would be "What next?", right? Well, at this point of time you are starting to realize that going on a hunt for videos to learn from, is a bit of a challenge, so it ought to be better if you complete a course on one of the many sites that offer them.

So you find yourself going through that tutorial for the next couple of months (or weeks, or days, it can vary) and at the end of it, you've become a web developer!

If only it were as easy as that! The point of this post is not to tell you to follow a specific course, or a tutorial series, there are numerous other such posts already available. The point of this post is to warn you about something that's often called tutorial hell or tutorial purgatory, and that just means that you feel like your skills are available to you only when you are following a tutorial, and that you are not a good enough developer when you try and build something on your own. The reason this comes up is because usually all our paths of becoming a web developer are different, but they always depend on the same sources of information.

So, what about that title? It just means that no matter how you learn full stack development, at the end of it all, only you can truly gauge what you need to learn and what you need to do next. The only way you can be happy with your work as a web developer is if you build stuff you actually want to! Might seem trivial, but it can go a long way. Oh and by the way, the journey that I've tried to convey in this post, is one that I have happened to go through, that may not accurately describe yours, but that was the entire point of this post!

DEV Community: Rajat M

Implement 5 Sorting Algorithms using JavaScript.

Understand Life Cycle Methods in React.js

How the browser renders a web page? — DOM, CSSOM, and Rendering | by Uday Hiwarale | JsPoint | Medium

Uday Hiwarale ・ Oct 4, 2020 ・ Medium

React useEffect : A hook to introduce lifecycle methods in functional components | by Divya Biyani | Medium

Divya Biyani ・ Feb 9, 2021 ・ Medium

What Are RESTful Routes and How to Use Them?

Stateless Over Stateful Applications | by Rachna Singhal | Medium

Rachna Singhal ・ Apr 8, 2019 ・ Medium

How To Build Simple RESTful API With NodeJs, ExpressJs And MongoDb | by David Inyang-Etoh | Medium

David Inyang-Etoh ・ Jul 11, 2019 ・ Medium

What Are Service Workers and How to Use Them?

What Are JavaScript Promises?

Rajat M ・ Aug 23 '20

What Are JavaScript Promises?

Psychology of Code Readability. By no means should this be regarded as… | by Egon Elbre | Medium

Egon Elbre ・ Jul 21, 2018 ・ Medium

Javascript — ES8 Introducing `async/await` Functions | by Ben Garrison | Medium

Ben Garrison ・ Mar 22, 2018 ・ Medium

An Introduction to Flexbox in CSS.

Understanding CSS Selectors. So you want to learn CSS selectors? | by Venky Royals | Frontend Weekly | Medium

Venky Royals ・ Feb 1, 2021 ・ Medium

What Are Higher Order Array Methods in JavaScript?

4 Practices to Help You Understand array.reduce() | by bitfish | JavaScript In Plain English | Medium

bitfish ・ Feb 18, 2020 ・ 6 min read Medium

Learn & Understand JavaScript’s Filter Function | by Brandon Morelli | codeburst

Brandon Morelli ・ Nov 19, 2017 ・ 4 min read codeburst.io

Demystifying the Mysteries of sort() in JavaScript | by Aphinya Dechalert | Mad Hash*Map* | Medium

Aphinya Dechalert ・ Mar 2, 2020 ・ 5 min read Medium

A Guide to Learn React.js

A Simple Introduction to Git.

Rajat M ・ Jul 26 '20

Concepts to become an advanced React developer | by Dhanraj Acharya | wineofbits | Medium

Dhanraj Acharya ・ Nov 16, 2018 ・ Medium

A Simple Introduction to Git.

Learn the Basics of Git in Under 10 Minutes

Gowtham Venkatesan ・ Jul 13 '19

Learn git concepts, not commands

Nico Riedmann ・ Jun 2 '19

A Beginner Friendly Guide to the World of Web Wevelopment.

Only you can learn web development!

Rajat M ・ Apr 14 '20

Personalize Your Web Wpp with a Favicon, Completely Free of Cost!

Only you can learn web development!

Uday Hiwarale ・ Oct 4, 2020 ・
Medium

Divya Biyani ・ Feb 9, 2021 ・
Medium

Rachna Singhal ・ Apr 8, 2019 ・
Medium

David Inyang-Etoh ・ Jul 11, 2019 ・
Medium

Egon Elbre ・ Jul 21, 2018 ・
Medium

Ben Garrison ・ Mar 22, 2018 ・
Medium

Venky Royals ・ Feb 1, 2021 ・
Medium

bitfish ・ Feb 18, 2020 ・ 6 min read
Medium

Brandon Morelli ・ Nov 19, 2017 ・ 4 min read
codeburst.io

Demystifying the Mysteries of sort() in JavaScript | by Aphinya Dechalert | Mad HashMap | Medium

Aphinya Dechalert ・ Mar 2, 2020 ・ 5 min read
Medium

Dhanraj Acharya ・ Nov 16, 2018 ・
Medium