DEV Community: XenoX

Revolutionise your Team Management Processes with Notion 🔥

Manpreet virk — Mon, 08 May 2023 14:10:58 +0000

Hey developers!👋

Exciting news to share with you all today!
Announcing the launch of our new Notion template: The Employee Management System!

Managing employees can be a daunting task, but with our new template, we've made it easy and convenient for you to handle everything from onboarding to performance reviews in one place. Our template includes sections for Onboarding, Project Management, Team Communication and Team Details Training, Company Policies, Performance Reviews, Compensation & Benefits - all accessible with just a few clicks!

We understand that it is not easily accessible nowadays to all businesses to have a EMS platform as a separate SaaS product, that is why, we have also come up with a free version of this notion template. If you are already a notion user, you can easily use this template in your workspace and manage your teams like a pro.

Let's dive in to get to know more about our basic and premium template's features:

BASIC EMS TEMPLATE

The basic employee management system is a solution for effectively managing your team's productivity and success. Our platform offers four crucial sections that have been specifically designed to simplify your HR processes and boost your team's performance.

Onboarding:

Onboarding section is to ensure a seamless and productive process of integrating new hires into your team. This allows for easy sharing of data and introduction of new team members to other employees and teams, streamlining the onboarding process.

Project Management:

Within this section, you have the capability to allocate tasks, oversee advancement, and monitor deadlines for all your projects. You can generate projects, assign duties to your team members, set deadlines, and maintain oversight of progress, all from one centralised location.

Team Communication:

The Team Communication section provides several tools that allow you to maintain contact with your team. This section makes it effortless to share significant information, such as announcements, schedules, and meeting notes, with your team.

Team Details:

The Team Details section functions as a comprehensive database of vital information about your team. You can save crucial details for each team member in this section, such as contact information, performance metrics, and other pertinent information.

Download: 🔗 Basic EMS

PREMIUM EMS TEMPLATE

A comprehensive tool designed to help businesses manage their workforce efficiently & help them simplify their HR tasks.This edition offers advanced features and a greater number of sections than the basic version to enhance your team's performance.

Onboarding:

Onboarding section is designed to help you bring new hires up to speed quickly and efficiently.

Project Management:

This section allows you to assign tasks, track progress, and monitor deadlines for all your projects.

Team communication:

Team communication section provides you with all the tools you need to stay connected with your team.

Training & Development:

You can create training programs and track progress all from one centralised location.

Team details:

Team details section is a comprehensive database of all your team's essential information.

Company Policies:

Create and update policies, share them with your team, and track acknowledgments to ensure that everyone is up to date with the latest policies and practices.

Performance reviews:

This section allows you to assess your team's progress and provide valuable feedback to help them improve.

Compensation and Benefits:

Keep track of leaves and targets and ensure that your team is fairly compensated for their hard work.

Download: 🔗 Premium EMS

Conclusion:

To conclude, our Employee Management System template provides a comprehensive solution for managing your team's activities, without any hassle and the best part is you can also do it for free!

If you find this template appealing, be sure to explore more options on Prototion. Prototion is a marketplace with over 1000+ templates designed by over 400+ talented creators. You can choose from a simple Meal Planner to a highly complex Company Management Toolkit.

BTW, we are live on Product Hunt today!😸

We have a special introductory offer for you, get the EMS premium version template at additional 5$ off, use coupon code "PHLAUNCH"

Here's a link for you to catch us there:
Producthunt Link

That's all for now, folks. See you next time!

Use these Notion Templates to Create Your Portfolio in Seconds

Manpreet virk — Tue, 28 Mar 2023 16:46:36 +0000

Hey there, fellow developers! 👋

Are you looking to showcase your skills and experience to potential employers or clients?

Look no further! We've got just the thing - the Ultimate Dev Portfolio! It's got all the sections you need to create a professional and polished portfolio that will help you stand out from the crowd. Whether you're a newbie or a seasoned pro, this template will make your life easier and your portfolio pop!

Best part is you can get it live for free with Notion. 💯

So, let's dive in and see what all the fuss is about. Here are the key features of these Notion Portfolio templates:

BASIC DEV PORTFOLIO

The Basic Dev Portfolio is a flexible and adaptable tool suitable for developers at any level of expertise, be it beginners or experienced professionals. It offers a means to structure your portfolio effectively, while also providing an impressive showcase for potential employers or clients.

Download: Link

1. About me section:

This section lets you introduce yourself with a profile picture, name, and a brief description of your experience and interests.

2. Skills section:

This section lets you list your technical skills, including programming languages, frameworks, and tools you're proficient in a simple manner.

3. Projects section:

This section lets you exhibit your projects with a brief description and a link to the project's live demo or source code.

4. Socials section:

Showcase your professional network by adding links to your social profiles

5. Education section:

In the Education section, list your academic qualifications in reverse chronological order.

6. Experience section:

The Experience section is where you highlight your work history, starting with your most recent position and working backwards.

7. Blog section:

Add links to your blog post with a brief overview of topics you covered.

Download: Link

ULTIMATE DEV PORTFOLIO

Ultimate dev portfolio is the premium version. This version includes advance features & more sections than the basic one.
The sections included are About Me, My Skills, Socials, Experience, Education, Projects, Blogs, Github Contribution Graph, Live Projects and Contact me. Each section serves a unique purpose in highlighting the developer's background, qualifications, achievements, projects & more. Here below is the complete detailed list of features in each section.

Download: Link

1. About me:

The About Me section is where you introduce yourself to potential employers or clients. In addition to your name and a picture of yourself, you may also want to include your current position or job title. This section should provide a brief overview of your professional background, your interests, and your goals.

2. Skills:

My Skills section allows you to present both technical and soft skills with linked databases to projects This section is your chance to stand out and showcase your distinctive skill set, setting you apart from other candidates.

3. Socials:

Your online presence is increasingly important in today's job market, and the Socials section allows you to showcase your professional network.

4. Education:

This section demonstrates your commitment to learning and your willingness to invest in your professional development.

5. Experience:

This section will provide a clear picture of your professional trajectory and demonstrate your ability to deliver results.

6. Projects:

The Projects section is where you showcase your professional accomplishments.You can also include links to any relevant code repositories, demos, or case studies.

7. Blogs:

If you have written any blog posts about your industry or professional experiences, the Blogs section is where you can showcase them.

8. Github Contribution Graph:

The GitHub Contribution Graph is a valuable feature to include in your developer's portfolio. It displays your contributions to both personal repositories and open source projects over a period, offering a quick and concise overview of your coding activity.

9. Live Projects:

This section provides a glimpse of your live website and projects, by including links to live projects, you can provide concrete evidence of your coding abilities.

10. Contact us:

A typeform induced section so that your potential employer can contact you by simply putting the mail address.

The ultimate portfolio comes in two different layout options and emphasizes the importance of not only showcasing technical skills but also soft skills, online presence, and dedication to the craft, making it an indispensable tool for developers.

With these notion templates, you can create a truly personalized and professional portfolio that will impress potential clients and employers. Elevate your portfolio to a whole new level and increase your chances of landing your dream job or project.

Download: Link

Conclusion

In conclusion, a well-crafted portfolio can make a huge difference in your career as a developer. The best part is that you can use Notion as CMS to update the data and your pages will be upto date.

NO CODE, NO DEPLOYMENT, NO COST

If you like this template, Checkout more on Prototion. Prototion is a market place with more than 1000 templates, created by over 400+ talented makers. You can get a simple Meal Planner or a super complex Company Management Toolkit.

That's it for now folks. Will see you next time.

💯 7 Free cool Form Components made in TailwindCSS

Sarthak Sharma — Mon, 04 Apr 2022 13:48:28 +0000

In this series, we have explored the web for all the cool tailwindCSS components that one can find for free and brought it to you. Today, we are exploring the form elements available on the web for free. Login Form, Signup forms and much more. So let's get started.

1. Login form by Erich Haemmerle

💵 Price: Free
🔗 Link: https://codepen.io/erich93063/pen/MWvLxNN
A cool cherry color Login page.

2. Registration form

💵 Price: Free
🔗 Link: https://tailwindcomponents.com/component/form-register-component
A split screen Login page, used quite often these days

3. Checkout Pay

💵 Price: Free
🔗 Link: https://codepen.io/cruip/pen/wvqVpbP
A Simple checkout form made in Tailwind CSS with both card and PayPal options.

4. Banner Image Signup Form

💵 Price: Free
🔗 Link: https://tailwindcomponents.com/component/login-7
Another cool Login Page with Big Side banner image, a lot of people use it these days.

5. Payment Form by Joe

💵 Price: Free
🔗 Link: https://codepen.io/dope/pen/gORRMOo
A minimalist payment form for Card payments

6. Account Form

💵 Price: Free
🔗 Link: https://tailwindcomponents.com/component/account-form
Edit account form for you users with multiple fields.

7. Checkout Form by Scott Window

💵 Price: Free
🔗 Link: https://tailwindcomponents.com/component/account-form
Checkout form made in tailwind for Ecommerce sites.

Conclusion

Thanks a lot, We will see you next week with some more components for you. Free components are useful for you start learning and explore a framework but sometimes you need Premium Components to speed up the Development process.

That's why we made DollarTailwind a UI kit with over 200 components to use in all kind of projects. We are giving an additional discount of 20$ to all our readers. Use code "DEVTAILWIND" during checkout, avail your discount and get 400$ worth of components for 79$.

Usage of `React.FC` from my experience

Krishna Damaraju — Sun, 13 Feb 2022 15:07:19 +0000

I have been working with React + Typescript setup for a year and a half and if you are someone like me, I bet you could have seen or used Typescript interface FC at least once. On that note, I want to share a few things related to React.FC, which are purely out of my experience using it. Please consider this just as an opinion, nothing much and nothing less.

What is `React.FC` or `React.FunctionalComponent`

React.FC is a generic interface for the functional components, one of the two ways to write components in React. This is not an inbuilt type, but comes as a part of the @types/react

Below is a general way to write a component that takes children,



const CardComponentNonFC = ({
  title, 
  children
  }:{ 
  title: string, 
  children: ReactNode
  })  => {
    return (
       <div className="card">
          <h1 className="card__title">{title}</h1>
          <div className="card__content">
            {children}
          </div>
      </div>
    )
}

And the same code can be written with React.FC in the following



import React, { FC } from "react";

const CardComponentFC:FC<{ 
  title: string
  }> = ({
  title, 
  children
  })  => {
    return (
       <div className="card">
          <h1 className="card__title">{title}</h1>
          <div className="card__content">
            {children}
          </div>
      </div>
    )
}

How do i use it 👍

Cleaner code and Better DX (Developer Experience) with the default children prop. It makes a component container by the behaviour and less mental toll in understanding the code.




// With FC
import React, { FC } from "react";

const Card = () => {
  return (
    <CardComponentFC {...}> // CardComponentFC is defined above
      <div> ... </div>
    </CardComponentFC>
  )
}


// same without FC
const CardNonFC = () => {
  return (
    <CardComponentNonFC 
      {...}
      children={  <div> ... </div>} />
  )
}

For me, the first code is much cleaner and easier to understand.

Second and last reason is the return type restrictions. I'd like my component to always return an element or null (null is mostly the bottom type of my components) and I don't like undefined being returned. React.FC has that check, by default, to prevent returning undefined.



import { FC } from "react";
export const Container: FC = ({ children }) => {
  if (children) {
    return <>{children}</>;
  }

 //💥 this would through the error
  return undefined;
};

See the CodeSandbox for the same.

How do i NOT use it 👎

I tried to use it for the default functional exports over the functional expressions. I had a hard time with it. Let me know if you have solved it 🙌

If a component that doesn't need to render children. It doesn't need to be typed as React.FC. Now that we know it implies the children prop by default, use FC only where it makes sense. Not every component need to accommodate the children.
Generics in React typescript is something I like and has the flexibility. React.FC doesn't seem to fit well with that.

Summary

There are mixed opinions on using it and it was recently removed from the Create React App template. There are a few posts suggesting not to use it, but from experience, you may not have any huge performance implications of not using it.

There are definitely some limitations/disadvantages of using it, but I would rather say that depends on the component. Not all components need memoisation or hooks, similarly, not all components need FC. If you can draw that thin line, you can happily use it.

** References to read more about it **

originally published at here

JavaScript Jungle: Who is the Proxy

Vikas yadav — Fri, 29 Oct 2021 12:27:39 +0000

I remember one of my interview few years ago. I was asked:

Given an object and how can we track when some property is accessed or updated on that object.

Example that was given by interviewer was as follows:

const obj = {name: 'Rick', planet: 'Earth'};

/**
* Case 1: Reading property:  
* Whenever I read any property
* it should print 
* GETTING value for <property_name> 
*/

obj.name; // GETTING value for name

/**
* Case 2: Setting property:  
* Whenever I set any property
* it should print 
* SETTING <property_name> = <new_value>
*/

 obj.planet = 'Mars' 
// SETTING planet = Mars

I was like what!!!

But any how I said to my self:

Let's pass this object into a function
Function somehow enhance this object and return it.

So I wrote:

function enhance(obj) {
  // do something with obj to enhance
}

Interviewer asked me about my thought process on this? After thinking and remembering a lot 🤷🏼‍♂️ I said, I know we have to some how intercept the read and write operation on the object, but I am not sure how to do it on the fly. I know when we define properties using Object.defineProperty, we have some control on how that property will behave but the object is already defined so I am not sure. Deep inside I was still not sure 😂 I was still thinking 🙇🏻‍♂️:

Interviewer dropped me a hint that if I am using Object.defineProperty then I need to redefine the properties on the object. Then after some hit and trial I came up with this:

function enhance(plainObject) {
   const keys = Object.keys(plainObject);

  const storedObject = {};

  keys.forEach((key) => {
    storedObject[key] = plainObject[key];
    Object.defineProperty(plainObject, key, {
      get: function () {
        console.log(`GETTING value for  [${key}]`);
        return storedObject[key];
      },
      set: function (value) {
        console.log(`SETTING ${key} = ${value}`);
        storedObject[key] = value;
      }
    });
  });

  return plainObject;
}


let obj = { name: "rick", planet: "earth" };

const enhancedObj = enhance(obj);

console.clear();
console.log(enhancedObj.name);
// GETTING value for  [name] 
// rick 
enhancedObj.planet = "Mars";
// SETTING planet = Mars

🌴 Explanation:

As we know, we have to redefine the properties again. First thing we need to do is to stored all the existing keys in keys variable.
Defined a new object storedObject
Then for each key we copied everything form plainObject to storedObject
Next we defined all the properties on plainObject again but this time we used Object.defineProperty to defined it.
WE have overwritten the get which is called when we read property of an object and set which is called when we set a value to a property of an object.
We put the appropriate log there.
Also whenever set is called we will store that value in storedObject and return from storedObject when get is called.

During this time I was explaining my thought process to interviewer and I did a lot of hit and trial as it was hard for me to remember methods on Object.

My solution has issues some issues:

If we add a new property on enhancedObject it will not be tracked. By the way, interviewer asked me this question as well 😆. But I could not come up with any solution back then. 😅


....

let obj = { 
    name: "rick", 
    planet: "earth" 
};

const enhancedObj = enhance(obj);

// this will not be tracked
enhancedObj.age = 30;

I was completely unaware that there is a better solution in ES6. After coming home when I researched, I found out a solution which is so much easy to implement as well as to understand.

Before we jump into our solution, let's learn a bit about JavaScript Specification of Object.

🌳 Internal Methods

JavaScript specification describes some lower level internal methods on Object like [[Get]], [[SET]], [[VALUE]], [[Writable]], [[Enumerable]] and [[Configurable]]. As per the specifications:

Each object in an ECMAScript engine is associated with a set of internal methods that defines its runtime behaviour.

Point to note: It defines runtime behaviour

But we cannot directly modify the behaviour of the Object at runtime using this so called Internal Methods as we cannot access it directly. As per the specifications:

These internal methods are not part of the ECMAScript language. They are defined by this specification purely for expository purposes.

There are some other internal methods as well. You can checkout full list here

But in ES6 we have a way to tap into these Internal methods at runtime.

🌳 Introducing Proxy

Proxy is a middleman. It does following:

It wraps another object.
It intercepts all the operations related to Internal Methods.
It can handle these operations by its own or it can forward these operation to the wrapped object.

🌴 Anatomy of Proxy


let proxy = new Proxy(target, handler)

Proxy is an inbuilt object that take two arguments:

target: An object that we need to wrap
handler: An object that defines various methods corresponding to Internal Methods that we need to intercept at run time.

Handler methods are often refer to as traps because it traps or intercept the Internal method.

Example


const character = {
   name: 'Rick',
   planet: 'Earth'
};

const proxy = new Proxy(character, {});

// update name 

proxy.name = 'morty';


console.log(character.name) // morty

👾 GOTCHA 👾 : If you do not define any handler function. Proxy will pass the all the operations to wrapped object as if it is not there at all.

🌴 Handler methods

For each of the Internal Method there is a handler method defined on the Proxy object. Some of them are:

Internal Method	Handler Method	Triggered On
[[Get]]	get	When reading a property
[[Set]]	set	When writing a value to a property
[[HasProperty]]	has	When used with `in` operator
[[Delete]]	deleteProperty	When deleting a property with `delete` operator
[[Call]]	apply	When we do a `function` call

You can refer to full list on MDN Docs and TC39 docs

🌴 Invariants

There are certain condition attached to each of the handle methods. These condition must be fulfilled by the trap or handler methods. These are often referred as Invariants. You can read more on this in note section here.

As an example for [[SET]] Operation these are the invariants as per TC39 docs:

The result of [[Set]] is a Boolean value.
Cannot change the value of a property to be different from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable own data property.
Cannot set the value of a property if the corresponding target object property is a non-configurable own accessor property that has undefined as its [[Set]] attribute.

🌴 [[SET]] Trap

If we set a trap for [[SET]] operation and then we can modify the input before setting on original object name


const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {
/**
* [[SET]] trap
* target: original object 
*         that has been wrapped
* prop: Property that has been set
* value: value to set to the property
*/
  set: function (target, prop, value) {
    // modifying the value 
    const capitalName = value.toUpperCase();
    // setting the value to target
    target[prop] = capitalName;
    return true;
  }
});

// update name

proxy.name = "morty";


// Log is MORTY instead of morty
console.log(character.name); // MORTY

🌴 [[GET]] Trap

Same as [[SET]] trap we can set the [[GET]] trap. Suppose when we access a property we want to print the log Getting <property_name>. We can achieve that by using [[GET]] trap like this:


const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {

/**
* [[GET]] trap
* target: original object 
*         that has been wrapped
* property: Property name 
*/

  get: function(target, property) {
    // printing the log before setting value
    console.log(`Getting: ${property} `);
    return target[property];
  }
});

const characterName = proxy.name;
console.log(characterName); 

// Getting: name  
// Rick

🌳 Reflect

Before I jump to Proxy solution of the problem. There is also a sister object of Proxy, which is known as Reflect. As per MDN docs

Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.

Point to note here is

It has methods same as Proxy
It is not a function
It is not constructible i.e you cannot use it like new Reflect

All the methods on Reflect are static so you can directly call them like

Reflect.get(...)
Reflect.set(...)

🌴 Relationship between Reflect and Proxy:

All the methods that you can define on the Proxy, Reflect has a same method with same argument.
Reflect can invoke the Internal Method by using the methods defined on it.

Proxy method	Reflect call	Internal method
get(target, property, receiver)	Reflect.get(target, property, receiver)	[[Get]]
set(target, property, value, receiver)	Reflect.set(target, property, value, receiver)	[[Set]]
delete(target, property)	Reflect.deleteProperty(target, property))	[[Delete]]

You can check other methods of Reflect on MDN Reflect Docs

🌴 What do we need Reflect for

We know there are a lot of Invariants that we need to deal with when we trap some operation in Proxy and forward it to the original wrapped object. Remembering every rule can be hard.

We can simply use Reflect to forward any operation on original object and it will take care of all the Invariants

So now our [[SET]] and [[GET]] trap will change like this:

const character = {
  name: "Rick",
  planet: "Earth"
};

const proxy = new Proxy(character, {
  set: function (target, prop, value, receiver) {
    const capitalName = value.toUpperCase();
    return Reflect.set(target, prop, capitalName, receiver)
  },

  get: function(target, property, receiver) {
    console.log(`Getting: ${property} `);
    return Reflect.get(target, property, receiver);
  }
});

🌳 Solution to original Problem:

With Proxy and Reflect now we can build our solution like this:

 const proxyObject = function (obj) {
  return new Proxy(obj, {
    set: function (target, property, value, receiver) {
      console.log(`SETTING ${property} = ${value}`);
      return Reflect.set(target, property, value, receiver);
    },
    get: function (target, property, receiver) {
      console.log(`GETTING value for  [${property}]`);
      return Reflect.get(target, property, receiver);
    }
  });
};


let character = { name: "morty", planet: "earth" };

character = proxyObject(character);



console.log(character.name);
// GETTING value for  [name] 
// morty 
character.planet = "Mars";
// SETTING planet = Mars 


/**
* ES5 solution does not work if we set new properties
* ES6 Proxy will work for new properties as well and 
* print our log
*/

charter.grandParent = 'Rick';
// SETTING grandParent = Rick

🍃 Browser Support for Proxy

As you can see most of latest browsers already support Proxy except IE, Baidu and Opera. So if you do not care about these three, you can use it like a breeze.

🦾 Practical Usage

You might be thinking, hmmmmm... this ok but what is the practical usage of this. During my research for this article I came across an example of a JavaScript framework that is utilising the powers of Proxy and that frameworkkkkkk isssss....

Vue 3 : Vue 3 uses Proxy to be reactive and yes you got it right, Vue 3 does not support IE 😝. Vue 3 uses Proxy for change detection and firing side effects.

If you are not tired after reading my blog I will highly recommend you watch this free video to see full potential of Proxy.

You can play with my solution here

🌳 What to read next

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

JavaScript Jungle: Convert any object to Iterable

Vikas yadav for XenoX ・ Oct 4 '21

#javascript #webdev #react #programming

Thank you for reading.

Follow me on twitter

🖖🏼 References

JS-DS: LinkedList- A JavaScript Implementation

Vikas yadav — Mon, 18 Oct 2021 01:49:59 +0000

In this series which I called JS-DS (JavaScript Data Structure), I will implement various Data Structures in Javascript. The first Data Structure that I am implementing is LinkedList.

One of the widely used data structure is Array in JavaScript. In contrast to Arrays which are inbuilt in JavaScript, LinkedLists is not inbuilt. Let's briefly know what is LinkedList and then deeply dive into the implementation.

LinkedList

@vaidehijoshi in her awesome medium blog post says:

LinkedList is linear data structure, which means that there is a sequence and an order to how it is constructed and traversed.

One of the famous analogy which is given for LinkedList is chain link. You can think of LinkedList as chain link. Each link in the chain is connected to another link to form the whole chain.

Basic building block

As you can see in the picture above, the basic building block of a chain is link, in similar fashion the basic building block of a LinkedList is node.

Node

A node has two parts

Data
Pointer or reference to next node

One of the important thing about node is, it only cares about the data it holds and the pointer to next node. Apart from this it does not know anything about other nodes in LinkedList.

Head

First node of the LinkedList is referred as head. When there is no element in LinkedList, the head is null. Head is the starting point of LinkedList.

Tail

The last node of the LinkedList is referred as tail. The tail of the LinkedList points to null as it is the last element in the list.

In Summery there is three main parts of LinkedList

Head
Node
Tail

Difference between LinkedList and Array

In her blog @vaidehijoshi says:

The biggest differentiator between arrays and linked lists is the way that they use memory in our machine.

Array requires allocation of contiguous memory while in LinkedList the memory allocation is dynamic which means the elements of LinkedList can be anywhere in memory.
When we add or remove element at start of the Array, it needs to shift all the elements (reindex all the items)
When we add or remove items from between the elements, array need to be reindexed again.
When we add more items in the array and it does not have enough memory for items, it will recreate a new array with enough memory (point to note here that it need to find enough contiguous memory again) and copy all the items from the previous array to new array then add our new items.

Adding and deleting items in Arrays is costly operation due to the reindexing, whereas LinkedList do not suffer the same issue.

Implementation of LinkedList

So now when basics are clear. Let's start implementing the LinkedList.

Node

As discussed above, Node has 2 properties:

data : Contains value of element added
next : Pointer to next element

To create a Node we need some element or data that we need to add to LinkedList. In ES 6 we have class so let's use it to implement Node.

// src/linkedlist/model.js

class Node {
  constructor(element) {
    this.data = element;
    this.next = null;
  }
}

Equality of node

Equality of nodes is one thing that we need later in our LinkedList implementation.

Anatomy of equals method:

Take two nodes as params
Perform some operation to decide whether nodes are equal or not
Return a boolean

For a default I am going to write a defaultEquals method which simply compares two nodes with === operator.

// src/linkedlist/utils.js

const defaultEquals = (nodeA, nodeB) => {
  return nodeA === nodeB;
};

LinkedList

Now it's time to write our LinkedList class.

// src/linkedlist/linkedlist.js

class LinkedList {
  constructor(equals = defaultEquals) {
    this.equals = equals;
    this.head = null;
    this.count = 0;
  }
}

As you can see LinkedList constructor will take an equals methods which is equal to defaultEquals. If user of the LinkedList want to override the equals, he/she can provide his/her own implementation of the equals method.

We initialise 3 internal properties of LinkedList :

equals : Which is initialised as passed defaultEquals methods
head: Pointer to the start of LinkedList. Initialised as null
count : Keep count of number of elements in LinkedList. Initialised as 0

Methods of LinkedList

add(element): Takes an element and add it to the list
insertAt(element, index): Adds the element at the specified index
addFirst(element): Takes an element and add it to start of the list
getAt(index): Return the element at the specified index
indexOf(element): Returns index of the passed the element. If the element do not exist in list it returns -1
removeAt(index): Removes the element at the specified index and return the removed element
remove(element): Removes the element if it exist in list and returned the removed element
size: A getter method which return size of the list
isEmpty(): Return true if list is empty otherwise return false
clear(): Clears the list
toString(): Return the string representation of the list

add(element)

Steps:

Create the new Node for the passed element.
Check if the list is empty i.e. size === 0. If yes then it is easy we just assign the node to the head

If list is not empty we need to go through the whole list to reach to the end of the list. As we know that the last element always points to null so that will be our breaking condition.
After we find last node, we simply assign the newly created node to the next of last node

Last but not the least we need to increase the count of the list.

// src/linkedlist/linkedlist.js

add(element) {
    const node = new Node(element);
    if (this.size === 0) {
      this.head = node;
    } else {
      let currentNode = this.head;
      while (currentNode.next !== null) {
        currentNode = currentNode.next;
      }
      currentNode.next = node;
    }

    this.count++;
  }

insertAt(element, index)

Steps:

First thing we check that the passed index is within the bounds i.e. between 0 and size. For this I have written an utility method _isIndexWithinBound

 _isIndexWithinBound(index) {
    return index >= 0 && index <= this.count;
  }

If it is not in bounds then we simply throw a Error that the provided index is out of bound
If the index is within the bounds of list then
Create the new Node for the passed element.
If we want to add the element to start of the list i.e. index === 0 then we simply need to point the head to our newly created node and then point the next of new node to the old head

        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;

If the index is not 0 then we need to find the previous node of the provide index. We need to find it because we need to break the link between previous node and the node at the provided index. To find previous node, I have implemented a utility method _getNodeAt(index), which return node at the provided index.
In _getNodeAt(index) we start from head and loop until we reach the specified index. Once we reach that index we return the node. If the head is null then we return undefined.

 _getNodeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      for (let i = 0; i < index && currentNode !== null; i++) 
      {
        currentNode = currentNode.next;
      }
      return currentNode;
    }
    return undefined;
  }

After we find the previous node using _getNodeAt(previousIndex) then we point the next of previous node to our newly created node and next of our newly created node to the existing node at that index.

        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;

At last we increase the count and return true to specify that the operation is success.

In summery whole insertAt will be like this

// src/linkedlist/linkedlist.js

insertAt(element, index) {
    if (this._isIndexWithinBound(index)) {
      const node = new Node(element);

      if (index === 0) {
        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;    
      } else {
        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;
      }
      this.count++;
      return true;
    }
    throw new Error(
      `IndexOutOfBoundError: Provided index ${index} is not 
        within bounds[${0} - ${this.size}] of LinkedList`
    );
  }

addFirst(element):

After implementing insertAt(element, index) it is very easy to implement addFirst. We just need to pass element and index = 0 for adding at the start.

  addFirst(element) {
    return this.insertAt(element, 0);
  }

getAt(index)

To implement getAt(index) we simply use _getNodeAt(index) to get the node at that index and if the node exist then we return data of the node.

  getAt(index) {
    const node = this._getNodeAt(index);
    return node && node.data;
  }

indexOf(element)

Steps

To find index of provided element we start from head.
For every node and use our equals method to check that provided node is equal to our current node or not.
If it is equal to our current node then we return the index.
If head is null or we have visited all the nodes and we do not find any of the elements to be equal to provided node then we return -1.

indexOf(element) {
    let currentNode = this.head;
    for (let i = 0; i < this.count && currentNode != null; 
    i++) {
      if (this.equals(element, currentNode.data)) {
        return i;
      }
      currentNode = currentNode.next;
    }

    return -1;
  }

removeAt(index)

Steps

First we check that the passed index is within bounds of list.
Then we check if the index === 0 means we want to delete first node of list. Then we assign second node (this.head.next) to head.

If index !== 0 then we need to find previous node to provided index. We can find that by using _getNodeAt(index - 1).
Then we point next of previous node to next node of current node (we can find current node by previousNode.next).
Lastly we decrease the count and return data of deleted node.

removeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      if (index === 0) {
        this.head = currentNode.next;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        currentNode = previousNode.next;
        previousNode.next = currentNode.next;
      }
      this.count--;
      return currentNode.data;
    }
    return undefined;
  }

remove(element)

Now that we know that how to find index of a given element and we also know how to remove a element at a given index.

Combining these two methods, we can implement remove(element) as follows:

  remove(element) {
    const elementIndex = this.indexOf(element);
    return this.removeAt(elementIndex);
  }

get size()

I have implemented size as getter to make it similar to length property in Array. Implementation is very easy, we just return count of the list

  get size() {
    return this.count;
  }

isEmpty()

If the size of the list is 0 then list is empty.

isEmpty() {
    return this.size === 0;
  }

clear()

To clear a list we simply set head to null and reset the count to 0.

 clear() {
    this.head = null;
    this.count = 0;
  }

toString()

I wanted the string implementation of LinkedList to be similar to Java implementation of toString of LinkedList which is something like this:

If we have added 1, 2 and 3 in LinkedList then toString will return [1,2,3]

To make it simpler, I first made this LinkedList iterable by implementing [Symbol.iterator] generator. If you do not know how to make any object in JavaScript iterable. I highly recommend this Convert any object to Iterable blog. Implementation is as follows :


 *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.data;
      currentNode = currentNode.next;
    }
  }

Once our LinkedList is iterable we simply take advantage of ... (spread operator) and convert our linkedlist to array and call toString on it.

 toString() {
    return `[${[...this].toString()}]`;
  }

Whole implementation

import { Node } from "./model";
import { defaultEquals } from "./utils";

export class LinkedList {
  constructor(equals = defaultEquals) {
    this.equals = equals;
    this.head = null;
    this.count = 0;
  }

  add(element) {
    const node = new Node(element);
    if (this.size === 0) {
      this.head = node;
    } else {
      let currentNode = this.head;
      while (currentNode.next !== null) {
        currentNode = currentNode.next;
      }
      currentNode.next = node;
    }

    this.count++;
  }

  _isIndexWithinBound(index) {
    return index >= 0 && index <= this.count;
  }

  _getNodeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      for (let i = 0; i < index && currentNode !== null; i++) 
      {
        currentNode = currentNode.next;
      }
      return currentNode;
    }
    return undefined;
  }

  getAt(index) {
    const node = this._getNodeAt(index);
    return node && node.data;
  }

  insertAt(element, index) {
    if (this._isIndexWithinBound(index)) {
      const node = new Node(element);

      if (index === 0) {
        const currentNode = this.head;
        node.next = currentNode;
        this.head = node;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        node.next = previousNode.next;
        previousNode.next = node;

      }

      this.count++;

      return true;
    }
    throw new Error(
      `IndexOutOfBoundError: Provided index ${index} is not 
        within bounds[${0} - ${
        this.size
      }] of LinkedList`
    );
  }

  addFirst(element) {
    return this.insertAt(element, 0);
  }

  addLast(element) {
    return this.insertAt(element, this.count);
  }

  removeAt(index) {
    if (this._isIndexWithinBound(index)) {
      let currentNode = this.head;
      if (index === 0) {
        this.head = currentNode.next;
      } else {
        const previousNode = this._getNodeAt(index - 1);
        currentNode = previousNode.next;
        previousNode.next = currentNode.next;
      }
      this.count--;
      return currentNode.data;
    }
    return undefined;
  }

  indexOf(element) {
    let currentNode = this.head;
    for (let i = 0; i < this.count && currentNode != null; 
    i++) {
      if (this.equals(element, currentNode.data)) {
        return i;
      }
      currentNode = currentNode.next;
    }

    return -1;
  }

  remove(element) {
    const elementIndex = this.indexOf(element);
    return this.removeAt(elementIndex);
  }

  isEmpty() {
    return this.size === 0;
  }

  get size() {
    return this.count;
  }

  getHead() {
    return this.head;
  }

  getTail() {
    return this.getAt(this.size - 1);
  }

  clear() {
    this.head = null;
    this.count = 0;
  }

  *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.data;
      currentNode = currentNode.next;
    }
  }

  toString() {
    return `[${[...this].toString()}]`;
  }
}

Thank you for reading.

You can play around the code on Codesandbox

Access the repository on Github

thejsdeveloper / JS-DS-LinkedList

Created with CodeSandbox

JS-DS: LinkedList- JavaScript Implementation

This repository contains implementation of LinkedList in JavaScript.

To know in detail please refer to my blog in JS-DS series.

Setup

Clone the repository

git clone https://github.com/thejsdeveloper/JS-DS-LinkedList.git

Enter into JS-DS-LinkedList directory

cd JS-DS-LinkedList

To Run

yarn start

To run Test Cases

yarn test

Instructions

You can find implementation in /src/linkedlist directory
I have added some test cases in /src/tes directory
I have also added some use cases in /src/index

After running yarn start look into the console of your browser for result

View on GitHub

Read my other articles

Special kind of array in Typescript - Tuple

Vikas yadav for XenoX ・ Sep 26 '21

#javascript #webdev #typescript #react

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

Follow me on twitter

References

@vaidehijoshi's [blog] on LinkedList part-1 (https://medium.com/basecs/whats-a-linked-list-anyway-part-1-d8b7e6508b9d)
@vaidehijoshi's [blog] on LinkedList part-2 (https://medium.com/basecs/whats-a-linked-list-anyway-part-2-131d96f71996)
@vaidehijoshi's video Lecture series on LinkedList
Learning Javascript DataStructure book

JavaScript Jungle: Convert any object to Iterable

Vikas yadav — Mon, 04 Oct 2021 01:16:54 +0000

When ES6 launched, it introduced two important protocols Iterable and Iterator. Basically we can convert any type of object to iterable by implementing these two protocols. By converting the object to iterable we can perform looping with for...of loop. We can also use spread operator in array (which is ... symbol in JS) on these objects. First let's understand these two protocols:

Iterable Protocol:

As per MDN

The iterable protocol allows JavaScript objects to define or customize their iteration behavior, such as what values are looped over in a for...of construct.

In simple terms it is a rule and by following this rule we can do two things:

If an object is already iterable, we can modify it's existing iteration behaviour
If an object is not iterable, we can add iteration behaviour to it.

If you have used JavaScript as a beginner then you have already used one of the famous iterable Arrays. Obviously there are other built in iterables in JavaScript as well. Some of the examples are :

Map
Set
WeakMap
WeakSet

Now the main question comes into picture.

How do we implement this protocol ?

This is very simple. We just need to implement @@iterator. This @@iterator is special property in JS. So to make any object iterable we need to add this @@iterable property to it.

We can get this by using constant symbol [Symbol.iterator]. If you do not known what Symbols are, please read here.

@@iterator should be a simple method with no arguments which will return a value that should comply with iterator protocol.

To summarise, we can convert any object to Iterable by using following steps:

Take an object
Add @@iterable property via [Symbol.iterator]
@@iterable should be a no argument method
Return of @@iterable method should be an iterator.

Before we explore deep into Iterable Jungle. Let's talk about iterator protocol

Iterator protocol:

As per MDN

The iterator protocol defines a standard way to produce a sequence of values (either finite or infinite), and potentially a return value when all values have been generated.

In plain English:

It is a rule which defines shape of values during iteration.
It also needs to tell us that there are no more values when we have gone through all the values.

To make any object iterator we need to implement next() method which will return an object which should have these two properties to it:

value - value which will be available during iteration
done - boolean value to indicate that there are more values or not

That's quite simple. Isn't it ? here is an example of Infinite Counter iterator

You can create a finite counter iterator as well

Notice how when limit is reached we return done: true. This is to tell the iterator like for...of loop that there is no more values and you can stop the loop.

Now that we know how to implement iterator, let's head back to our iterable and implement it fully.

So for our example we want user to be iterable and return us [key, value] when we iterate through for...of loop. If you try to iterate user in for...of without implementing iterable you will get following error:

TypeError: user is not iterable

So here is a codesandbox implementation of making user iterable:

As you can see, we have added [Symbol.iterator] which intern return an object containing our next() function which implements iterator protocol.

We can reduce some of code if we use as special kind of function called Generator Functions

 // with our own implementation of iterator 
 [Symbol.iterator]: function () {
    const keys = Object.keys(this);
    let index = 0;

    return {
      next: () => {
        if (index < keys.length) {
          const key = keys[index];
          const val = this[key];
          index++;
          return {
            value: [key, val],
            done: false
          };
        }
        return {
          value: undefined,
          done: true
        };
      }
    };
  }


//with Generator function
[Symbol.iterator]: function* () {
    const keys = Object.keys(this);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const val = this[key];
      yield [(key, val)];
    }
  }

Generator Functions:

Generator Functions are just a syntactic sugar. In our own implementation of iterator function we need to keep track of internal states like value and done. Generator functions returns a special iterator which is called Generator

Generator functions are declared with function* syntax. And it uses a special keyword yield to give us values over course of iteration.


//definde function with * 

function* counter() {
 //yield something here
}

yield Vs return

yield is very different from return. When we return from a function, it simply means end of execution and we come out of function. Where as when we yield, generator function pauses the execution and keep track of what to yield next. So when we call next again on our generator it will yield next value in line.

Let's take a look of an example

// defined Counter generator
function* Counter() {
  yield 1;
  yield 2;

}
// create an instance of COunter
const counterInstance = Counter();

//first call 
console.log(counterInstance.next()) 
//{done: false, value: 1}

// second call 
console.log(counterInstance.next()) 
//{done: false, value: 2}

// Third call 
console.log(counterInstance.next()) 
//{done: true, value: undefined}

As you can see when we create instance of our generator it return us an iterator. It does following:

When we call next first time it will yield a {done: false, value: 1} and pause.
When we call next again it keeps track of it's state and yield {done: false, value: 2}
When we call last next as there is nothing to yield any more it gives us {done: true, value: undefined}

You can keep on calling next() after it is done, but it will always give you {done: true, value: undefined}.

Now let's use generator for our Infinite Counter

Infinite Counter with Generators

function* InfiniteCounter() {
  let count = 0;
  while(count !== Number.infinity) {
    yield ++count;
  }

}

const counterInstance = InfiniteCounter();

console.log(counterInstance.next()) 
// {done: false, value: 1}
console.log(counterInstance.next()) 
// {done: false, value: 2}
console.log(counterInstance.next()) 
// {done: false, value: 3}

As you can see, with Generator it is a lot cleaner.

You might be thinking, it's all cool. But I do not want to do all this just to make an object Iterable. I have Object.entries I will use that. Give me some good practical example.

So here it is.

Practical example

LinkedList

I am going to implement very basic LinkedList. It only contain following methods

add - To add new elements to LinkedList
size - A getter the size of LinkedList
head - A getter for head node
tail - A getter for tail

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

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.count = 0;
  }

  get size() {
    return this.count;
  }

  add(value) {
    const node = new Node(value);

    if (!this.head) {
      this.head = node;
    } else {
      const tail = this.tail;
      tail.next = node;
    }
    this.tail = node;
    this.count++;
  }

  *[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.value;
      currentNode = currentNode.next;
    }
  }

  toString() {
    return `[${[...this].toString()}]`;
  }
}

Main portion of code to check is this:

*[Symbol.iterator]() {
    let currentNode = this.head;
    while (currentNode) {
      yield currentNode.value;
      currentNode = currentNode.next;
    }
  }

You can see how I made LinkedList iterable by implementing [Symbol.iterator]. * in front of [Symbol.iterator] makes it a generator and I am yielding the values until whole list is exhausted.

Next portion to look at is toString

toString() {
    return `[${[...this].toString()}]`;
  }

You can see here use take advantage of Spread operator in array of Iterable. I spread it in an array then take advantage of toString of Array object.

Redux Saga

Recently I got to know that one of Redux libraries Saga uses generators heavily.

Some of example used here can be found in this Codesandbox.

Thank you for reading.

Read my other articles

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

#javascript #webdev #beginners #development

Special kind of array in Typescript - Tuple

Vikas yadav for XenoX ・ Sep 26 '21

#javascript #webdev #typescript #react

Follow me on twitter

References

Special kind of array in Typescript - Tuple

Vikas yadav — Sun, 26 Sep 2021 03:27:25 +0000

In strictly typed programming languages, array is a Data structure of homogeneous data types with fixed length. In contrast JavaScript is dynamic. In here, array can have elements of heterogeneous data type and length can vary.

In JavaScript:

const elements = ['rick', 23, false];

const len = elements.length; // len = 3

elements.push({name: 'morty'}); 

const changedLen = elements.length; // changedLen = 4

With Typescript, we can restrict that and force arrays to have homogeneous data type what I mean is this.

In Typescript:

const elements: string[] = ['rick', 'morty'];

const len = elements.length; // len = 2

Now if we try to push number or any other data type other than string in elements then Typescript will yell at us.

const elements: string[] = ['rick', 'morty'];

elements.push(1) // Error
/**
* Error: Argument of type 'number' is not assignable to 
* parameter of type 'string'.
*
*/

Even though Typescript enforces the type but length is still not fixed. We can push another element of type string in elements array.

const elements: string[] = ['rick', 'morty'];

const len = elements.length; // len = 2

elements.push('summer')

const changedLen = elements.length; // changedLen = 3

What if our requirement changes like this:

Requirement 1:

An Array with type number, boolean and string only.

Solution

Well! that is easy, we can use union type with array in Typescript like this:

const elements: Array<number|boolean|string> = ['summer'];

elements.push(23); // ok
elements.push(true); // ok 

console.log(elements) // ["summer", 23, true] 

elements.push({name: 'morty'}) // Not OK : Error
/**
* Error: Argument of type '{ name: string; }' is not 
* assignable to parameter of type 'string | number | 
* boolean'.
*/

One point to note here is:

The sequence of the data type is not fixed as we defined during the declaration. What it means that, we can push number, boolean and string in any order.

For example, This is also perfectly valid and OK with TypeScript:

const elements: Array<number|boolean|string> = [true];

elements.push(23); // ok
elements.push('summer'); // ok 

console.log(elements) // [true, 23, "summer"]

By Array<number|boolean|string>, we only narrowed the type and told Typescript that this collection should only have elements of type number, boolean and string. The order can be anything. Typescript do not mind as long as the type is one of the declared types.

Requirement 2 :

An array with a fixed number of items
type of elements are fixed at each index
The type of elements need not be same at all the index

What did you just say An array with a fixed number items ??

And it can have different type at different index? oh okkkk......

Solution

Actually this is possible with new type called tuple in Typescript.

Tuple - Special kind of Array

As per official docs:

Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.

Tuple fulfils all the requirements described above. Let's see how can we define a tuple.

/**
* let's define a info of character id, name and activeStatus
*/
 const info: [number, string, boolean] = [33, 'Rick' , true];

An array with a fixed number items

Just by doing this, now we fixed number of elements in info i.e. 3. So now if you try to access the element at index 4 Typescript will yell at you.

 const info: [number, string, boolean] = [33, 'Rick' , true];

const item = info[4] // error
/**
* Tuple type '[number, string, boolean]' of length '3' has no 
* element at index '4'.
*/

// In contrast if we declare an array with union type like
// below, it will be ok to access the element at index 4 

const arr: Array<number|string|boolean>
                 = [33, 'Rick' , true];
const arrItem = arr[4] //undefined

Type of elements are fixed at each index

By defining [number, string, boolean], we have fixed the type of elements at each index. Typescript will infer the type from tuple.

 const info: [number, string, boolean] = [33, 'Rick' , true];
 const item1 = info[0] // type number
 const item2 = info[1] // type string
 const item3 = info[2] // type boolean

 // In contrast, array with union type 

const info: Array<number| string| boolean>
                 = [33, 'Rick' , true];

// type of items can be either string, number or boolean

 const item1 = info[0] // type string | number | boolean
 const item2 = info[1] // type string | number | boolean
 const item3 = info[2] // type string | number | boolean

Advantage of doing this is, I can get all the methods available to string for item2.

The type of elements need not be same at all the index

The type of elements in tuple can be same as well as different:

const a: [number, string, boolean] = [33, 'Rick' , true];
const b: [string, string, string] = ['Mr', 'Rick' , 'alive'];

Practical example:

You might be thinking, it looks great but where do we use it.

One of the examples that I can think of is in our custom hooks where we have to return an array consisting values of different data type. Take for example useToggle custom hook

import { useCallback, useState } from "react";

export const useToggle = (
  intialValue: boolean = false
): [boolean, () => void] => {
  const [state, setState] = useState(intialValue);

  const setToggle = useCallback(
       () => setState((flag) => !flag), 
   []);

  return [state, setToggle];
};

Here we have to return current status of toggle and a function to change the status. That's why, the return type is a tuple [boolean, () => void].

If we simply return an array, and assign the second argument i.e. setter function to onClick, Typescript will throw a compile time error as the return type is union of boolean and () => void .

Type 'boolean | (() => void)' is not assignable to type 

'((event: MouseEvent<HTMLButtonElement, MouseEvent>) 
    => void) 
   | undefined'.

You can checkout these examples here:

Thank you for reading.

Read my other TypeScript articles

Unknown and any type in Typescript

Follow me on twitter

References

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav — Sun, 19 Sep 2021 11:16:12 +0000

I have never heard about sparse array before one of my colleagues shared this interesting issue.

 const range = new Array(10).map((_, i) => i);

This code looks good to me. What can go wrong!! It should create the array of length 10 which will have values ranging from 0 - 10.

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Let's see....

Output

Whhaaaatttt on the earth is that output.....!!!!

The length of the array is 10 but when we try to access the value at index 0 the output is undefined. Same for other indices.

Ok. That is super weird. Next thing that usually comes to mind is this:

map isn't working. Let's use forEach.

 const range = [];
 new Array(10).forEach((_, i) => range.push[i]);

Output

Nooooooooooo!!

Earlier, at-least we had length 10 which was what we expected. But now we lost that too. As you can see above in the output that length of range is 0 and since length is 0 that's why no element at any indices, that's why we get undefined at range[0]

Code looks correct, then why is it that output is unexpected.

Actually all these unexpected behaviour is caused by sparse array.

OK. So what on earth is sparse array ?

Enter the maze

Sparse Array

Any array will be sparse array if one of the values at any given index is empty

Empty value does not mean undefined or null. Empty mean that there is no value at all.

So in above example if I print range in chrome browser console. This will be the output:

Basically new Array(length) will create an array of specified length but all the values will be empty. It's like array has holes in it.

You can create the sparse array by following:

const range = [,,,];
const numbers = [1,2,,4];
const planets = ['earth', 'venus', 'mars'];
delete planets[1]; 
// when we delete element at certain index it creates a hole

Output

Explanation of the real issue

Now we know about sparse array. So let's begin with our initial problem.

Scenario 1 : map

 const range = new Array(10).map((_, i) => i);

So here new Array(10) will create a sparse array of length 10.

(10) [empty × 10]

Now what will happen when we call map on sparse array ?
As per MDN Docs

Due to the algorithm defined in the specification, if the array which map was called upon is sparse, resulting array will also be sparse keeping same indices blank.

As our whole array is sparse that is why resulting array is also sparse and all the values are blank or empty.

If we have following code, result will be different

[1,2,,4].map((num, i) => i * num)

Output

As you can see that callback of map does not do anything on the index which is empty.

Scenario 2: forEach

 const range = [];
 new Array(10).forEach((_, i) => range.push[i]);

As per MDN Example

No operation for uninitialised values (sparse arrays)

Which simply means that the callback will not be invoked for empty values.

As our whole new array is sparse, callback will be skipped for all the elements and no value is pushed to range array.

Other ways to create range

With Array.from

 Array.from({length: 5}, (_, i) => i);

With new Array(length) and fill

  const a = new Array(3).fill(0).map((_, i) => i)

Output

Thank you for reading.

Follow me on twitter

JavaScript Jungle: Convert any object to Iterable

Vikas yadav for XenoX ・ Oct 4 '21

#javascript #webdev #react #programming

References

MDN Array
2ality
Freecodecamp article

My first experience in Tailwind CSS 👩🏻‍💻

Diti Arora — Mon, 13 Sep 2021 11:29:53 +0000

Recently I start learning Tailwind CSS, a CSS framework that helps you write CSS way faster.

Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. Basically, it lets you write CSS in the form of classes within HTML.

Prerequisites for learning Tailwind CSS

After testing out Tailwind, below are the things you should have knowledge about before starting with Tailwind CSS -

Basic HTML (especially Classes and Ids)
Basic CSS
Mobile and Desktop responsiveness
NodeJS should be pre-installed
Little knowledge about npm packages

How I started

Tailwind is very easy to use and to get your grasp on if you have good knowledge about CSS. Since it is that same CSS we are writing but in short, there wasn't anything extra that was needed to learn before I could start learning Tailwind.

To start with Tailwind, I followed the playlist of Tailwind Lab's on YouTube: Tailwind CSS: from Zero to Production . This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files( like package.json, tailwind.config file ) and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!< br/>

Difficulties I faced

To me, the process of setting up your Tailwind project was a little difficult at first, though as time passed everything was clear to be.
Another problem I faced was since we were styling our code inside our HTML file (classes to be precised), the code started looking very confusing especially when you have to heavily style your elements.

Ease of learning

It is not at all difficult to learn Tailwind CSS since as I mentioned it above that there is nothing extra you've got to learn as we are writing that same old CSS.
Tailwind's documentation has got one of the best explanations for the same, that is its core concepts, how it works, and its usage.
The classes used in tailwind are very easy and straightforward, you wouldn't need to glance back at its docs to see class names!

Bootstrap vs Tailwind CSS

Bootstrap and Tailwind, both are one of the most used CSS frameworks.

Bootstrap lets you quickly design and customize responsive mobile-first sites. It's the world’s most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

1.Customizability

Tailwind according to me is very flexible(customizable). You can decide all the properties and values by yourself, and there is never any need of writing extra CSS. When talking about custom properties, you can easily build your custom colour, use external fonts, etc by making a custom property in your Tailwind config file

Unlike Tailwind CSS, Bootstrap is not very customizable because it have pre-styled elements, and there can be times when you might consider making a CSS file for changing the default styling provided by Bootstrap and adding a bit of your own touch.

2.Usage with CSS Preprocessors

Since Tailwind is a PostCSS plugin, it can easily be used with other preprocessors like Sass, Less, Stylus and others, just like you can with other PostCSS plugins like Autoprefixer.

Bootstrap comes with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. It by default comes with Sass variables and mixins.

3.Removal of unused classes

Both Tailwind CSS and Bootstrap uses PurgeCSS to remove all the untouched css classes which are only helping in increasing the file size.

4.Looks

Tailwind:

A simple card design with Tailwind 👆

Tailwind code

Tailwind:

A simple card design with Bootstrap👆

Bootstrap code

Well, both look good in their own way but then again bootstrap is less customizable and I would have to write extra CSS in order to change its appearance according to my website's theme.

Final Thoughts

Below are some reasons why I believe that Tailwind is worth using-

It's very beginner-friendly. While building web pages, you won't even need to leave your HTML file!
Unlike Bootstrap, It is highly customizable
You don't have to worry about unnecessary code, PurgeCSS will take care of it.
It has memorable class name. So you won't need to repeatedly go back to the documentation
You can even make your own classes, so you won't have to repeat the same code again and again.

Thanks for reading😃. Bye!

What is Structured Data for Advanced SEO?

relativelyrehan — Sun, 08 Aug 2021 18:07:21 +0000

Have you ever searched for some product online and get a result like this from the google? Do you also want your search results to come up with all this information? This can all be achieved using Structured Data.

Structured data is, giving important information about your website to help search engines show your results at the top with all the important information you want to convey to your customers. This might include the price of your product, discounts, reviews, ratings, etc.

You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardised format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.

Google

Here is an example of structured data for a product from our platform https://prototion.com/

<script type="application/ld+json">{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Notion Library Template",
  "author" : {
    "@type" : "Person",
    "name" : "Patrick"
  },
  "image": "https://someimageur.png",
  "description": "Use this template to plan all your content in one place, including the channel it is posted on, the type of content it is (photo, video)",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": 38,
    "bestRating": "5",
    "worstRating": "5"
  }
}</script>

JSON-LD is a format to create a unified structured data vocabulary for the web. If you want to read more about JSON-LD, then read this https://json-ld.org/. But I want to focus here on how you can use it in your projects to use SEO for maximum traction.

Let us now break down what is happening in this script tag. First, we define the format for content and type. The type may be product, blog, etc. Then we are provided with more information such as name, image, etc. Then we move to provide ratings. We can also provide additional information depending upon the use case. Here is an amazing tool to generate all sorts of json-ld for free. JSONLD.

When all set and done, this is the end result. You can test your json-ld before going live using this tool provided by google.

That's it folks. I hope you will now implement the structure data in your projects and make it to the top in the SEO game.

@relativelyrehan

Keep track of your books 📚using this template

Sarthak Sharma — Fri, 09 Jul 2021 11:38:12 +0000

Hey folks 👋🏼

We just launched another Product on Product Hunt. It's a notion template that lets you keep track of all your awesome books in one place.

Notion Library Template

In this template you can write summaries, prioritize text, remember your favorites, and make reading productive - like never before.

Track your books

Got the reading bug? This feature-rich Notion template lets you keep track of all your awesome books in one place. Write summaries, prioritize text, remember your favorites, and make reading productive - like never before.

Features

Save and organize books

You can save your books in a section and add descriptions and genres so that you have an easier time accessing them according to your mood.

Mark books as favorite

You can mark your book as favorite So that you can track your reading pattern and understand what genre among books you really like the best

Archive books

Remove from sight the books you have already finished reading, but still keep them safe if you ever want to access them later.

Sort books by language

What better way to learn languages than by reading interesting books? Easily arrange your books according to language and access your books faster.

Sort books by status

Reading 10 books at a time? Always know where you left off with the in-built status tracker.

View owned books

Rented a book or bought one? Keep rented ones on priority, read them faster, and save money!

A dictionary of unfamiliar words

This amazing feature is especially for those who're learning a new language. Sharpen your vocabulary while reading through juicy chapters!

Rate books

Sort out which authors seem to tickle your funny bone better than the rest! Being a book critic was never easier!

Add summaries

Reading for a school project or a work-related presentation? Create summaries and refresh key points at a glance. Brush up on a topic any time you want.

Cross-platform syncs

Sync your books with other third-party apps that you use to track your book reading progress. This library really is all-in-one!

Want One?

Here is your link 👉 Notion Library

We are on Producthunt today. Go show some love here🔥

DEV Community: XenoX

Revolutionise your Team Management Processes with Notion 🔥

BASIC EMS TEMPLATE

PREMIUM EMS TEMPLATE

Conclusion:

BTW, we are live on Product Hunt today!😸

Use these Notion Templates to Create Your Portfolio in Seconds

BASIC DEV PORTFOLIO

1. About me section:

2. Skills section:

3. Projects section:

4. Socials section:

5. Education section:

6. Experience section:

7. Blog section:

ULTIMATE DEV PORTFOLIO

1. About me:

2. Skills:

3. Socials:

4. Education:

5. Experience:

6. Projects:

7. Blogs:

8. Github Contribution Graph:

9. Live Projects:

10. Contact us:

Conclusion

💯 7 Free cool Form Components made in TailwindCSS

1. Login form by Erich Haemmerle

2. Registration form

3. Checkout Pay

4. Banner Image Signup Form

5. Payment Form by Joe

6. Account Form

7. Checkout Form by Scott Window

Conclusion

Usage of `React.FC` from my experience

What is React.FC or React.FunctionalComponent

How do i use it 👍

How do i NOT use it 👎

Summary

JavaScript Jungle: Who is the Proxy

🌴 Explanation:

🌳 Internal Methods

🌳 Introducing Proxy

🌴 Anatomy of Proxy

🌴 Handler methods

🌴 Invariants

🌴 [[SET]] Trap

🌴 [[GET]] Trap

🌳 Reflect

🌴 Relationship between Reflect and Proxy:

🌴 What do we need Reflect for

🌳 Solution to original Problem:

🍃 Browser Support for Proxy

🦾 Practical Usage

🌳 What to read next

JavaScript Jungle: Curious case of sparse array in JS

Vikas yadav for XenoX ・ Sep 19 '21

JavaScript Jungle: Convert any object to Iterable

Vikas yadav for XenoX ・ Oct 4 '21

🖖🏼 References

JS-DS: LinkedList- A JavaScript Implementation

LinkedList

Basic building block

Node

Head

Tail

Difference between LinkedList and Array

Implementation of LinkedList

Node

Equality of node

LinkedList

Methods of LinkedList

add(element)

insertAt(element, index)

addFirst(element):

getAt(index)

indexOf(element)

removeAt(index)

What is `React.FC` or `React.FunctionalComponent`