DEV Community: Arvind M

What is Headless WordPress(CMS)?

Arvind M — Tue, 24 May 2022 13:48:08 +0000

What is a headless CMS?

To understand what a headless CMS is, it helps to understand what traditional content management systems (CMSs) and what are they used for. The CMS manages everything, including the creation, reading, updating and deleting the content, as well as how it is displayed. The CMS approach of putting everything in one place like content, images, HTMl, CSS made it impossible to reuse the content because it was mixed with code.

Over the years it has become very difficult to organize content in web pages, making it impossible for the same content to adapt to other platforms.

One way to solve the limitation of traditional CMS is by making use of a headless CMS. A headless CMS is slightly different. It lets you manage content but does not care how the content is displayed. You can choose any front end of your choice that you want the content to be displayed from. Content that is housed in a headless CMS is delivered via APIs for seamless integration across different platforms.

Some traditional CMS can also be turned into a headless CMS that allows you to send content to a separate presentation layer(front end).

While headless CMS enables you to choose an appropriate front end of your choice, not all CMS solve an underlying problem: structuring the content so that it can be reused across different platforms.

Headless Wordpress

A headless wordpress works differently; it removes the front end tools, leaving only the backend content management tools. It still allows you to upload, create, edit and delete content. But instead of pushing content directly to the front end, headless wordpress makes its resources available to a separate front end solution through REST API.

By eliminating themes and instead sharing content via wordpress REST API, any wordpress installation can be made headless.In a headless wordpress configuration, the content management tools are still available, but front end features like themes and block editor are not. Another front end tool handles how the user’s website looks.A headless wordpress is not always the best solution. However, there are times when it is an ideal solution.

Benefits of headless Wordpress

Front End Flexibility: You can keep the “content management” part of the Wordpress CMS and outsource the front end to virtually any other software of your choice as long as the front end tool can make API requests to the Wordpress API.
Improved Performance: In traditional Wordpress the page speed isn’t always faster and slow page load can hurt the end user experience. But with headless Wordpress, one potentially speeds up their page performance. For example, you can fetch content from Wordpress and assemble it into static HTML pages, then ship the static pages to clients upon request.
Improved Security: If the front end is separated from the content, it will be much more difficult to locate and access the content directly through the website, as long as the backend server is sufficiently hidden.

Limitation of headless Wordpress

Complex Maintenance: When opting for headless Wordpress, you have two systems to maintain, especially in terms of security and updates. In the long run, maintaining two different systems may lead to technical issues.
Expense: Maintaining complex environments may turn out to be expensive. It typically takes more development time to make changes.
Less Wordpress Functionality: Designing in the back end becomes difficult because live preview is no longer supported. A majority of wordpress plugins do not work.

Next Steps

After weighing the pros and cons of headless Wordpress and if you decide it is worth pursuing, there are several ways to go about it.

Wordpress Plugins: this approach still requires the developer to be well versed in relevant programming languages and API. The main plugin that you can use is WPGraphQL, which lets you turn your WordPress installation into a GraphQL API. What this means is that you can create your own data schemas that any front-end client may use to retrieve data from your headless CMS.
Coding it on our own: While using a plugin makes it easier but doing it manually will give you more flexibility. Ever since REST API was introduced in Wordpress it has become a great tool to turn Wordpress into a headless CMS.
Static Wordpress hosting: while this approach is not free it has its own advantages. Some of the best static Wordpress hosts are Shifter, HardyPress, NorthStack

In conclusion, I would definitely recommend using Wordpress as a headless CMS to develop smaller sites like blogs. Hope you find this article useful. :)

5 essential free resources to learn Javascript

Arvind M — Fri, 20 May 2022 08:36:26 +0000

What is Javascript?

Javascript is a beginner friendly programming language that lets you add interactivity to your website. It is the most fun and useful programming language to learn. It can be used to do many different things like building websites, apps, servers and much more.

Due to its immense popularity it’s one of the most sought after skills in the tech industry today. If you want to become a Javascript Developer and build exciting things for the web then you are in the right place because I have pulled together a list of free resources for you to learn Javascript.

1) Scrimba: 7 Hour interactive course on Javascript - Link

This beginner’s tutorial taught by the founder of Scrimba offers 140+ coding challenges and 3 unique projects to help you solidify your Javascript knowledge. Once you are done, you will feel confident enough to pick up any front end framework of your choice. The only prerequisite before taking this course, you should have a basic understanding of HTML and CSS.

2) FreeCodeCamp: Javascript Algorithm and Data Structures - Link

One of the originals and still one of the best, FCC continues to expand its most excellent range of free courses and this Javascript course is one of them. With the help of this course you will learn the fundamentals of Javascript including variables, arrays, objects, loops and functions. Along the way you will also learn how to create algorithms to become a better problem solver.

3) WES BOS: Javascript30 - Link

A super helpful resource to take you from a beginner to intermediate Javascript Developer. This course does exactly what it says; helps you learn Javascript by building 30 projects in 30 days while talking about the hows, the whys and the whats that you will use to solve problems.

4) Ania Kubów: Learn Javascript by building 7 Games - Link

It is hard to believe this video course is available for free on youtube. When you learn by building projects, you learn better and when you learn by building games you learn 10 times better. By the end of this course you will have enough skills and Javascript knowledge to build projects on your own.

5) Traversy Media: Javascript Playlist - Link

I think Traversy Media is worth a mention, not just for its vast selection of free Javascript courses but also for its quality content. This youtube channel’s Javascript playlist offers almost everything you will need to become a Javascript Pro. It is one of the best Javascript resources for you to learn and become a Javascript Developer.

Conclusion

Once you have got a good understanding of plain Javascript, the next step is to pick up a front end framework. React, Vue and Angular are some popular Javascript frameworks to learn to become a better Javascript Developer.

I will keep updating this essential list as and when I can. Add this article to your bookmarks, so you can alway have it ready. :)

7 Best Image Hosting Platforms to use In 2022 for your next project

Arvind M — Tue, 17 May 2022 10:45:02 +0000

Image hosting services helps users to upload and host images on the internet easily. Following are some of the image hosting platforms that offer common features like free storage space, backups, quick uploading, editing and ease of sharing on social media:

1. Cloudinary

It is a platform that provides a better way to upload, manage and deliver ten of thousands to millions of images and videos. It makes it easier for brands to deliver fast and flawless visual experiences at scale using AI, automation and advanced patent pending image and video processing capabilities.

Features:

Automated image and video optimization
Smart Image cropping
High performance delivery through a CDN
Media performance analytics

Free Plan

The free plan provides 25 monthly credits which gives us the opportunity to have
25 GB of manage storage or 25 GB of net viewing bandwidth.

2. Filebase

It is the first S3 compatible object storage platform that allows its users to store
data in a secure, redundant and performant manner across decentralised storage networks.

Features:

Instantly upload files in a single click
Fast global CDN that distributes content globally

Free Plan

Filebase offers a 5GB free tier to all users, with no expiration or trials.

3. ImgBB

A quick and free image hosting service that is primarily used to upload and share images through links or embedded HTML codes.

Features:

No account required to upload files
Files have a maximum limit of 32MB per file
Convenient feature allows quick image resizing
Supports JPG, PNG, BMP, GIF, TIFF, WEBP, HEIC, and PDF files

Free Plan

Its free plan has unlimited storage space. Contains AD.

4. Uploadcare

It provides companies with simple, powerful, developer friendly building blocks to handle file uploading, processing and delivery. A complete out of the box solution created for the engineers by engineers.

Features:

Unlimited image transformations
Best in class file uploader
Worldwide CDN coverage
Automated image optimization

Free Plan

Its free plan only offers 3000 uploads with a storage space of 3 GB.

5. Imagekit

It uses a global network of servers for real time image optimization, resizing, image upload and a fast image CDN. It provides a faster and lighter experience for its users.

Features:

Displays images in milliseconds
Delivers compressed and responsive images in right format
Lets user use their own domain for better SEO and control
Uses built in AWS cloudfront or user can choose their own

Free Plan

Its free plan offers 20 GB bandwidth and media storage per month.

6. AWS S3

It is an object storage service offering industry leading scalability, security and performance.Users can optimise costs, organise data and configure fine tuned access controls to meet specific business needs.

Features:

Storage management and monitoring
Storage analytics and insights
Fast Data processing and Performance

Free Plan

It provides 5 GB of standard storage for the first 12 months.

7. Firebase (Cloud Storage)

Cloud storage for Firebase is built for developers to store and serve user generated content, such as photos and videos. It is a powerful, simple and cost effective object storage solution.

Features:

Strong security
High scalability
Robust operations

Free Plan

Its free plan gives a cloud storage space upto 5GB.

Conclusion

Take a good look at the image hosting services summarised in this article and choose according to your needs. If you find this article helpful please do like, comment and share it with others. Thank you :).

My journey as a self taught developer

Arvind M — Sun, 15 May 2022 10:22:50 +0000

In this article, I will share my journey as a self taught developer and what it takes to have a career in tech without a degree and how I overcome common developer problems like imposter syndrome & tutorial hell.

My Story

When I was in school I used to be a very shy introvert kid and was neither good nor bad at studies. Basically was just an average performing kid at school for a very long time.

I was into sports especially cricket because it is a sport that probably every other kid had played during his or her childhood in India.

I loved playing cricket so much that all my family members knew that if I was not around and they needed to find me, they would only find me in one of the cricket playgrounds near my house. Basically the cricket grounds used to be my second home.

Even though I was so crazy for cricket, I never had a proper interest in pursuing a career in cricket. Other than cricket, technology was something that used to fascinate me.

I was always curious to know how websites are built, at that time I thought it took something closer to knowing rocket science to build websites. Since I was an introvert I used to hesitate a lot asking about websites and technology to my computer science teachers.

However, when I gathered enough courage to let them know about my curiosity for websites they did not care to explain it to me properly which created self doubts about my liking for technology and made me feel not good enough about myself.

It was one of the first instances when imposter syndrome struck me. At that time I had no idea what imposter syndrome is and how it is natural for us humans to struggle with it.

That was the day when I gave up on my liking for website development. After that day my only goal was to study properly in school and get good grades to have a better future because that is what most of the schools and teachers make you believe in some parts of our country.

Of course, we have progressed with time but there is still room for improvement, marks still continue to play an important aspect in deciding the future of children in our country. Like any student, marks made me underperform in exams and subject to constant comparison with other top graders in school.

While I got average grades in most of my schooling life, I decided to change that a little from my 10th standard in order to get into a top tier college. I was successful in getting my grades up by the time I passed out of school and in fact was to get into one of the best colleges in India.

However, I had to drop out of college due to some family issues. It was a very difficult decision for me because at that time I was under the impression that to succeed in a race of life,a person needs to have a degree. While having a degree has its own importance, it is not the degree but the skill that achieves you success.

I learnt that it is a skill which attracts the employers and helps you move towards your goal and succeed in life. I learnt various different skills ranging from basic computers to business communication skills.

Even though I had acquired the necessary skills to get a job, I could not get a job. Because in most parts of the world, especially in India; in order to get a job one needs to have experience and in order to have experience one needs to have a job - it is a paradox that a lot of people get stuck in.

So, to break out of this paradox I decided to do an internship(paid), which paid me well and at the same time gave me an opportunity to get experienced and learn a new skill set.

I applied to various different companies for an internship and eventually got selected to do an operations internship at a well established organization. I was fortunate enough to be part of a very passionate and helpful bunch of people. While I learned a lot of different useful things during my internship, one thing that I learned changed my life entirely.

I learned - “In life you need to find something that you love to do and do it for the rest of your life”. This line had a major impact on me and I started exploring things that I have keen interest in and things that I enjoy doing in which I could have a fruitful career.

As I had mentioned earlier, when I was a kid I had a great interest in website development but had to give up on it due to not having enough knowledge about it. During my internship I had a computer system available to me. I decided to explore more about website development during my free time.

That is when I came across Codeacademy’s free web development courses which I got started with immediately and as I explored more I got to know more about free resources to learn to code.However, even after finishing some courses I was not confident enough to put my newly learned skills to practice.

Then, I decided to do more courses, watched more youtube videos etc to get better at web development. Even that was not useful and never actually realized that this whole period is referred to as Tutorial Hell.

Tutorial hell is referred to as the time in every new developer’s journey where the developer constantly keeps jumping from tutorial to tutorial, coding along with the tutorial without any trouble but not being able to use any of the knowledge in their personal or professional projects.

Like imposter syndrome, tutorial hell is also very common among a self taught developer’s journey.So, in order to come out of tutorial hell I stopped watching any more tutorial and decided to use all the knowledge that I had learned from previous tutorial to build a project on my own.

Since I only knew basic HTML and CSS, I started out cloning minimalist looking websites like BBC news, Facebook homepage etc. This is my version of the Facebook clone that I build using basic HTML and CSS. Once I got more comfortable with my skills I created more such websites which eventually helped me get another internship, but this time it was a Wordpress developer intern role at an early stage startup.

It was a four months internship with an opportunity to turn from intern to full time role. When I started my internship I got to know that the company didn’t have a tech team and I was the first person in their tech team along with an experienced Product Manager, it was both a good experience and a bad one. I looked on the positive side and got to work.

During the internship I had to get myself familiar with Wordpress and had to brush up on HTML and CSS even more. I was fortunate enough to get an opportunity like this where I could learn and improve my skills instantly and put it to work. Thanks to which I was able to add Javascript under my tool belt.So, when you learn by doing you learn better.

Once my internship got over, the company offered me a full time role to work as a Front end Developer. I was on cloud nine and could not believe that I had finally got a full time job and could now make a living out of the thing that I love to do the most i.e, website development. Along with me the company hired a new backend developer who had only six months of experience and a CTO who was more into the backend.

So, basically it was a suicide squad and on top of that the product manger who had the most experience on the the company’s product from a technical viewpoint decided to quit the company. We were an inexperienced team with almost zero knowledge of the company’s product from a technical viewpoint.

When you have less experience and no experience at all, the only thing you could do to move forward in life is to be ambitious. We all were ambitious in some way or the other and that helped all of us in believing in each other and getting the job done.

One of the major tasks that we worked on was to create a hybrid mobile and web app for the company. We decided to build a web app and a mobile app using React.JS. For mobile, along with React.JS, we choose to go with Cordova to act as a wrapper to the mobile app.

So as the front end developer I had to learn React.JS from scratch. Before learning React.JS, I had to get myself familiar with at least intermediate level Javascript because the better you are with Javascript, the more successful you will be with React.JS. Instead of using a free course I decided to buy this Udemy course to help me learn Javascript. Along with this course I supplemented other youtube tutorials on Javascript from Traversy Media and Net Ninja to solidify my learning.

Learning the intermediate level of Javascript was one of the most valuable decisions I made to accelerate my ability to work on React projects and become a skilled React Developer. Once I had a good understanding of Javascript, I learnt the basics of React.JS using this popular interactive course from Scrimba by solving various coding challenges and building mini projects.

The main goal was to take my React skills to the next level by building more applications and that is exactly what I did. I started implementing all the React.JS knowledge into practice on the company’s project. As a result, we successfully delivered the project on time meeting all the design and business expectations.

Me and my team continued to work on numerous different projects and as the number of projects increased, the company decided to increase the size of the tech team as well. A couple of new interns were added to the front end and a few to the backend team.

As I was the most experienced front end guy, I was given an added responsibility to take care of the front end interns. Due to this pressure, the imposter syndrome kicked in, leaving me feeling inadequate like I don’t belong there and not good enough as a developer.

The reason being, I was afraid to fail and that too in front of some junior developers. Because my goal was always to learn to code websites and pursue a career doing it, I never thought I would have to mentor and help other developers on my journey. I was never ready for such responsibility.

Fear of failure means that, subconsciously, you undermine your own efforts to avoid the possibility of larger failure. It made me do nothing and resisted me from moving forward. Eventually when I explored fear of failure I came to understand that it is part and parcel of life. If you look around, all the successful people have experienced some kind of failure in life.

Most of us will fall & stumble in life, we might make bad decisions. But very often most valuable insights come only after failure. Accepting and learning from those insights is key to succeeding in life. By accepting my knowledge gaps in website development I was able to figure out why I was feeling inadequate and not confident enough to lead a team of developers.

After realization, I quickly managed to fill out my knowledge gaps by solidifying my skills which helped me overcome my imposter syndrome and lead a team of junior developers in a better way.

Over the years, a lot of people left the organization, I remained constant and due to my consistency & hard work I was promoted to a senior front end role. After spending three years at a startup, I left the company and now I am working as a Senior Full Stack Web Engineer at Adsparc.

Thank you for reading. Hopefully sharing my experience will help you keep moving forward and not getting discouraged when things are not going your way :).

Tutorial: Learn how to reverse a string in Javascript

Arvind M — Fri, 13 May 2022 14:36:06 +0000

The goal of this Tutorial is to help you understand how to reverse a string in Javascript. You’ll learn different ways to solve this problem. This is one of the best ways to learn how to solve a problem.

Before you start solving this problem, you will need to familiarise yourself with basic Javascript.

By the end of the Tutorial, you will:

Know how to convert a string into an array and convert an array into a string
Know how to use Javascript build in methods such as: reverse() and join()
Know how to loop through a string in reverse order using a for loop.
Know how to concatenate a string.
Know how to use reduce() (higher order array function)

Problem Solving

In order to become a good programmer one needs to be a good problem solver because at the end of the day that is what a developer’s real job is to solve problems. It is one of the main skills that employers seek in job applicants.

Following are some ways we can solve a problem:

The first step to solve a problem is to properly understand the problem. Understanding the problem will help you craft a better solution.
Once you have understood the problem, implement a plan to solve the problem. Do not just jump into coding the solution yet. Take appropriate time to craft the solution.
Once you have a plan. Execute the plan. Plan execution involves the actual coding.
Review your solution. Once a problem has been solved, always look to see if the solution can get better.

Solution #1

Javascript already has a built in method reverse() that reverses the order of the elements in an array. However, we need to reverse a string and the reverse() method can not be used on a string.

In order to use the reverse() method, we need to make sure we are working with an array. So the first step of this solution is to convert the string into an array which can be achieved by using a Javascript string method split().

split() method converts a string into an array of characters and returns a new array.A variable named strArr will store the array of characters. Now that we have an array, we can use the reverse() method on this array which will give us the array in reverse order and store the result in a variable named reversedArr.

   // convert the string into an array of characters
   const strArr = str.split("")

   // reverse the array using reverse method
   const reverseArr = strArr.reverse()

The final step is to convert the reversedArr array into a string which can be achieved using join() method and return the final result.

join() method returns an array as a string.

    const result = reverseArr.join("")
    return result

Final Code

function reverse(str) {
    // convert the string into an array of characters
    const strArr = str.split("")

    // reverse the array using reverse method
    const reverseArr = strArr.reverse()

    // convert  the array back to a string using built join method
    const result = reverseArr.join("")
    return result

}

reverse("hello")

If you are familiar with modern Javascript syntax. We can have a one line solution to this problem using an Arrow Function.

const reverse = (str) =>  str.split("").reverse().join(“”);

Solution #2

Since strings in Javascript are both iterable and have number indexes and length just like an array, we are able to loop through them using for loop.

First step to this solution is to create a variable named result and initially it will be set to an empty string.

const reversed = ""

Using the for loop, iterate through the given str value and take out one character of the string at a time and stick it at the start of the variable named result.

for (let i = 0; i < str.length; i++) {
       reversed = str[i]  + reversed
 }

Finally return the result variable.

function reverse(str) {
   const reversed = ""

   for (let i = 0; i < str.length; i++) {
       reversed = str[i]  + reversed
   }

   return result

}

reverse("hello")

Solution #3

Similar to what we did on our first solution, the first step will be to convert the string into an array because reduce can only be used on an array. With the edition of ES6 there are multiple ways to achieve this task. One such instance is using the spread operator.

const strArr = [...str]

The next step is to make use of the** reduce()** method. It takes two sets of arguments, one being an arrow function and the other being the initial value for our function. In our case the initial value will be an empty string “”.

The arrow function will have two arguments:

previousValue - it accumulates the arrow function’s return values
currentValue - The current element from the array.

const result = strArr.reduce((reversed, char) => {
      return  char  + reversed
}, "")

Since we are passing in the initial value the first time the function runs, the initial value will be used in place of previousValue. Similar to our second solution, stick the character to the start of the previousValue in every iteration and return the result.

Conclusion

Hope you find this article helpful. Please feel free to comment your suggestion, feedback or your version of solution to this problem.

Understanding Recursion in JavaScript with a binary search example

Arvind M — Wed, 16 Mar 2022 14:24:45 +0000

In computer science, recursion is a method of solving a computational problem where the solution depends on solutions to smaller instances of the same problem.

In simple terms a recursion is technique of creating a function that calls itself until it does not.

All recursive function will have two cases:

*base case *- which will not call itself
*recursive case *- which calls its self

The best way to understand this is to do an example.

Let's say you have a sorted array of integers and want to check if a target number exists in that array or not. Since there are multiple ways to solve this problem. The most common one is to loop through the entire array to check if it is equal to the target number or not.

But in this article we will solve this using recursion which is more efficient in nature.

function isPresent(nums, target) {
  let middleIndex =  Math.floor(nums.length / 2);
  let middleElement = nums[middleIndex];

  // base case
  if (middleElement === target) return true;
  // recursive case
  else if (middleElement < target && nums.length > 1) {
    return isPresent(nums.slice(middleIndex, nums.length), target);
  }
  else if (middleElement > target && nums.length > 1) {
    return isPresent(nums.slice(0, middleIndex), target);
  }
 // in case if the value does not exists
  else return false;
}

isPresent([5, 7, 9, 11, 13, 19, 36, 39, 72], 19); // returns true

Here, isPresent() function is a recursive function which accepts two parameters nums - sorted array of integers and target - number that we wish to find.

Inside the function before the base case we will get the middle index of the array to find the middle element of the array.

Our base case will check if the middle element is equal to the target, then we will simply return true.

Now onto the recursive part the function. Here we will check for the two cases

if the target is greater than the middle element - we will call the function again but with the new array which consists of all the numbers after the middle element.
if the target is less than the middle element - we will call the function again but with the new array which consists of all the numbers before the middle element.

Understanding the recursive case:

isPresent([5, 7, 9, 11, 13, 19, 36, 39, 72], 19)

// the given array's middle element
let middleIndex = Math.floor(nums.length / 2);
let middleElement = nums[middleIndex];
console.log(middleElement); // 13

Since the current middle element 13 is **not equal **to the target number 19, our function will move to the recursive part.

return isPresent(nums.slice(middleElement, nums.length), target)
// this action will rerun the function and this time
console.log(middleElement) // will be 36

Now since the middle element 36 is not only not equal to the target number 19 but also less than the target

return isPresent(nums.slice(0, middleIndex), target);
// this action will also reurn the function and this time
console.log(middleElement) // will be 19

Finally our middle element is 19 which is equal to the target and fulfils the base case, the function will return true and the recursion will end.

Conclusion

In this article you learned what a recursion is and how to make use of recursion in JavaScript to check if a number exists in a given sorted array. If you enjoyed reading the article and it helped you learn something please do like and share it with others. :)

Beginner's guide to Linked List in JavaScript

Arvind M — Tue, 15 Mar 2022 12:00:44 +0000

There are a few different types of linked lists. But the most popular ones are: singly, doubly and circular. In this article we will learn to implement a doubly Linked List Data structure in JavaScript. Some of the operations that we are going to implement in this article are:

Add a node to the head
Add a node to the tail
Reverse a linked list

We will start by creating a linked list function constructor and it will contain two piece of information (a) the head and (b) the tail.

All a linked list class needs are two pointers the head pointer which points to the first
node in the list and the tail pointer which points to the last node in the list.

function LinkedList() {
  this.head = null;
  this.tail = null;
}

Initially the head and the tail will be set to null because they will have no nodes to point at the start.

Next, for our node list we will create a node constructor function. Each node will have three properties on the them (a) the value, (b) the pointer to the next node and (c) the pointer to the previous node.

function Node(value, next, prev) {
    this.value = value;
    this.next = next;
    this.prev = prev
}

Now we will instantiate a new linked list.

const LL = new LinkedList()

// if you try to access the linked list, it will look like this
console.log(LL) // { head: null, tail: null }

Next up, the new instantiation will have few helper method to add and remove data.

1. addToHead

This method adds new value to head of the linked list.

LinkedList.prototype.addToHead = function (value) {
  // instantiate  a new node
  const newNode = new Node(value, this.head, null);

  // if there is already a head present set its prev value to the newNode

  if (this.head) {
    this.head.prev = newNode;
  } else {
    this.tail = newNode;
  }

  // set the current head to newNode
  this.head = newNode;
};


LL.addToHead(80)
LL.addToHead(90)
LL.addToHead(100)

2. addToTail

This method adds new value to tail of the linked list.

LinkedList.prototype.addToTail = function (value) {
  const newNode = new Node(value, null, this.tail);

  if (this.tail) {
    this.tail.next = newNode;
  } else {
    this.head = newNode;
  }

  this.tail = newNode;
};

3. removeHead

This method deletes the current head and returns its value

LinkedList.prototype.removeHead = function () {
  // if there is no head, simply return null
  if (!this.head) return null;
  // else

  // store the current head value in a variable to return it later
  let currentVal = this.head.value;

  // now  reassign the current head
  this.head = this.head.next;

  // if there is a next value, change its prev value to null
  if (this.head) {
    this.head.prev = null;
  } else {
    this.tail = null;
  }

  return currentVal;
};

4. removeTail

This method deletes the current tail and returns its value

LinkedList.prototype.removeTail = function () {
  if (!this.tail) return null;

  let currentVal = this.tail.value;

  this.tail = this.tail.prev;

  if (this.tail) {
    this.tail.next = null;
  } else {
    this.tail = null;
  }

  return currentVal;
};

5. reverse

This method reverses the linked list

LinkedList.prototype.reverse = function () {
  // head is the first node in the list

  let currentNode = this.head;

  //  start with the head

  // as long as currentNode has a value run the loop

  while (currentNode) {
    //  store the current node prev value in a varialbe
    let temp = currentNode.prev;
    //  swap the previous and next node with each other
    currentNode.prev = currentNode.next;
    currentNode.next = temp;

    //  assing the previous node value to the current node which will eventually be null
    currentNode = currentNode.prev;
  }

  // store the currentTail's value in a variable

  let currentTail = this.tail;

  // reassign the tail's value to current head and head's value to previous tail
  this.tail = this.head;
  this.head = currentTail;
};

Summary

In this article we implemented a doubly linked list in JavaScript. Hope you enjoyed reading it.:)