DEV Community: Atit Patel

I Earned Over $4000 In 4 Months on Medium

Atit Patel — Wed, 03 Mar 2021 16:26:02 +0000

My Medium Journey with JavaScript in Plain English, and how I ended up earning over 4000 USD in 4 months

Time flies so quickly and One month went so fast. Last month I have wrote an article about how reached 2200/month after 3 months of my medium Journey.

How I went from earning $0.55 to $2,200+ in 3 Months

_My Medium Journey with JavaScript In Plain English_javascript.plainenglish.io

“It is impossible for me to remember how many days or weeks went by in this way. Time is round, and it rolls quickly.” ― Nikos Kazantzakis, Saint Francis

Today, I would like to discuss my journey of the fourth month with a lot of ups and downs and what I learned and improved as a writer in the month of February.

If you missed my previous article let me introduce myself and How I ended up in the medium.

Like everyone else, I started my Medium journey by reading different blogs. I bought a Medium subscription in July as I was restricted to read more stories.

When I joined Medium I had no intentions of trying to earn money from Medium and honestly speaking I had no clue about the Medium writing program. Crazy right?

I was an Angular Developer for X years and wanted to change my career so I started exploring the latest trends in Frontend Technologies. I started preparing for different questions and Medium was helping me to go through different topics in depth. After 35 days of preparations, I was able to get my dream job as a Senior Consultant in One Company.

One day suddenly I came across one topic about someone’s journey of earning some amount from the Medium and it motivated me to write and share my research and experiences about topics that most interviewers ask in Angular Interviews.

This was the first article I wrote in Medium. (Note: I have recently changed title)

Advanced Angular interview questions you must prepare in 2021

_Part 1_medium.com

I have received 1 view/day after posting this article. I was so happy after seeing that someone is reading my article.

After writing one article, I started researching how I can share this article with others and how I can enhance my views and basically make more money.

I have read a lot of articles so I got the idea of which kind of the content reader wants to read and which motivates them to read my articles. I started with my Interview Questions and I started writing about different topics such as the basics of Angular, Optimization, and Performance Techniques.

9942 views/day on January 15

When I got $0.55 USD in my bank I have decided next time I will make more for sure.

My first-month earnings:

One day I got contacted by one publication to publish my story to their publication. After publishing the story my views got increased and I found a new way to improve the views by publishing stories to publications.

I started writing more and more which helped me to learn and adapt to different styles. Next month I earned $120.98 and then went to $670.71.

Below are different month’s earning details:

To know the tips and How I started writing, you can check my previous article.

How I went from earning $0.55 to $2,200+ in 3 Months

_My Medium Journey with JavaScript In Plain English_javascript.plainenglish.io

Today, I would like to focus on what I did differently to get 1500 earning in Feburay month. There was a lot of up and downs but I keep myself motivated and reached my goal.

1. Cross-posting

I recently heard about this term and it is basically publishing your article to the other websites.

You might ask, Why do we need to do that? From what I understood so far is different people follow different blogging websites in order for them to read your content or expose your material it is better to publish to 2–3 famous blogging websites according to the subject.

First, consider cross-posting unique content by making slight adjustments to your existing post. This way you will have two versions of articles. You can mention canonical link or where the article originally published in their post settings.

I found it helpful to post my content to dev.to and hashnode and I got a decent amount of views in a month there too.

2. Twitter

Yes, Twitter is one more platform where I took lightly. I was using Twitter to share my blog's link but was not focused on interactions and reaching out to more people. This month I did the following things.

1. Engaging with more people.

You can check out my Twitter. https://twitter.com/patelatit53

2. Exposing a small amount of content to my tweets

3. Using proper tags while tweeting

I found the https://hashtagify.me/ website very helpful while selecting tags.

3. LinkedIn and Facebook groups

I have continued to post my articles to Facebook and Linkedin groups and it helps me to expose my articles to more audiences.

For Example, I was writing about JavaScript and Angular so I was posting in the below groups and pages.

JavaScript Professional Group
Angular 2+
Angular Club — Developers, Professionals & Enthusiasts ( AngularJS 1.x to Angular8 )
https://www.facebook.com/groups/JavaScript.Programming

To know the tips and How I started writing, you can check my previous article.

How I went from earning $0.55 to $2,200+ in 3 Months

_My Medium Journey with JavaScript In Plain English_javascript.plainenglish.io

4. Writing more and more.

We cannot define success by just writing some stories and waiting for them to be successful. I believe writing more and more not only helps me to improve my writing but also helping me out to reach more audiences.

In the month of Feb, I have written 25+ stories on medium and cross-posted 15+ stories on other blogging websites.

So what you are waiting for?

“Success will never be a big step in the future, success is a small step taken just now.” ― Jonatan Mårtensson

I would like to thank JavaScript In Plain English, and Sunil Sandhu for guiding me and supporting me in this journey.

You can check out some of my popular stories in the month of February.

25 More StackOverflow Jokes That All Devs Can Relate To

30 More Funny Code Comments

22 Utility Functions To Ace Your JavaScript Coding Interview

20 Useful VS Code Extensions for Frontend Developers

100 Coding Terms and Definitions Every Developer Should Know

30 Stress Relievers For Programmers

Corporate Jargon: Hilarious Phrases We Use Daily

Best Programming Blogs to Learn & Master Your Coding Skills in 2021

Continue reading on JavaScript in Plain English »

12 Tips To Help You Stay Motivated While Learning To Code

Atit Patel — Wed, 03 Mar 2021 16:22:38 +0000

How To Keep Motivating Yourself While Learning To Code

Photo by Cristofer Jeschke on Unsplash

As the new year starts we take some resolutions and think we will fulfill this resolution no matter how many hurdles I need to face or no matter how much I need to give my favorite things.

For example, there are more than 13% of people who make resolutions to do exercise. but do you think how many of them might fulfill that?

The exact same thing happens when we decide to learn to code. We quickly take some courses available in Udemy or freeCodeCamp and start practicing them.

After some weeks, sometimes you feel that the course you took might not have all content you were looking for and you buy some other courses and as all courses have different content, we might lose in the courses itself.

After several months, we might feel that you are nowhere as you have lack knowledge in all the topics and this can lead to disappointment and basically giving up on learning new stuff.

But do you think what you missed when you start coding? What if someone guided you in the right direction? or someone motivated you throughout this journey?

If you’re trying to teach yourself how to code, you are probably pretty familiar with the struggles in the story.

Photo by Severin Höin on Unsplash

In this article, I would like to discuss some of the actionable tips to keep you motivated in your learning journey.

Top Programming Blogs in 2021

Atit Patel — Fri, 26 Feb 2021 15:45:13 +0000

Best Programming Blogs to Master Your Coding Skills in 2021

51 JavaScript Features covered from ES12 to ES5 you might not know yet

Atit Patel — Wed, 24 Feb 2021 15:37:14 +0000

51 techniques to optimize and clean your code

The future of JavaScript is going to be brilliant. Keeping up with the changes shouldn’t be harder than it already is, and my motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.

You might be doing JavaScript development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. These techniques can help you to write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.

Here I am coming with a new series to cover all JavaScript features (with versions) that help you to write more clean and optimized JavaScript Code. This is a Cheat list for JavaScript Coding you must know in 2021.

ES2021/ES12

replaceAll(): returns a new string with all matches of a pattern replaced by the new replacement word.
Promise.any(): It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.
weakref: This object holds a weak reference to another object without preventing that object from getting garbage-collected.
FinalizationRegistry: Lets you request a callback when an object is garbage collected.
Private visibility modifier for methods and accessors: Private methods can be declared with #.
Logical Operators : && and || operators.
Numeric Separators: enables underscore as a separator in numeric literals to improve readability.
Intl.ListFormat : This object enables language-sensitive list formatting.
Intl.DateTimeFormat : This object enables language-sensitive date and time formatting.

ES2020/ES11

BigInt: provides a way to represent numbers(whole) larger than 253–1
Dynamic Import: Dynamic imports give the option to import JS files dynamically as modules. It will help you to get modules on demand.
Nullish coalescing Operator: returned the right-hand side value if the left-hand side is null or undefined. By default, it will return the left-side value.
globalThis: contains the global this value, which basically works as a global object.
Promise.allSettled(): returns a promise which basically contains the array of objects with the outcome of each promise.
Optional Chaining: read the value with any connected objects or check methods and check if property existing or not.
String.prototype.matchAll(): returns an iterator of all results matching a string against the regex.
Named Export: With this feature, we can have multiple named exports per file.
Well defined for-in order:
import.meta: object exposes context-specific metadata to a JS module

22 Utility Functions To Ace Your JavaScript Coding Interview

22 Utility Functions To Ace Your JavaScript Coding Interview

_JavaScript Coding Assessment Cheatsheet 2021_medium.com

ES2019/ES10

Array.flat(): creates a new array by _combining_ the other arrays in the main array. Note: we can set the depth to combine arrays.
Array.flatmap: creates a new array by applying _callback_ function to each element of the array.
Object.fromEntries(): transforms a list of key-value pairs into an _object._
String.trimStart() & String.trimEnd(): method removes whitespace from the beginning and end of a string.
try…catch: statement marks a block of statements to try and if any error occurs catch will handle it.
Function.toString(): converts any method/code to _string_.
Symbol.prototype.description: returns optional description of **_Symbol_** objects.

ES2018/ES9

Asynchronous Iteration: With the help of **_async_** and **_await_** now we can run the series of asynchronous iterations in the for a loop.
Promise.finally(): returns a promise when it is settled or rejected. It will help to avoid duplicating **_then_** and **_catch_** handlers.
Rest/Spread Properties: for object _destructuring_ and arrays.
Regular Expression Named Capture Groups: can group to be named using the notation **_?<name>_**after the opening bracket.
Regular Expression s (dotAll) Flag: matches any single character except carriage returns. The _s_ flag changes this behavior so line terminators are permitted
Regular Expression Unicode Property Escapes: can set the Unicode property escapes with Unicode _u_ flag set and _\p{…}_ and _\p{…}_

ES2017/ES8

Object.entries():returns an array of a given objects _key and value pairs_.
Object.values(): returns an array of given object’s property values.
padStart(): pads the current string with another string until the resulting string reaches the length.
padEnd(): pads the current string with the given string from the end of the current string.
Object.getOwnPropertyDescriptors(): returns all own property descriptors of a given object.
Async functions: expand on Promises to make asynchronous calls.

ES2016/ES7

Array.prototype.includes(): determines whether an array includes a certain value among the given value. It returns true or false.
Exponentiation: returns a result of raising the first operand to the power of the second operand.

ES2015/ES6

Arrow function expressions: is alternative to traditional functional expression for some cases
Enhanced Object Literals: extended to support setting the object constructions.
Classes: create class using _class_ keyword.
Template Literals: can add parameters directly in the string using _${param}_
Destructuring Assignment: helps to unpack values from arrays or properties from objects.
Default + Rest + Spread: supports the default value, spread parameter or array as arguments.
Let + Const:
Promises: used for async operations.
Modules:
Map + Set + WeakMap + WeakSet:
Math + Number + String + Array + Object APIs:

let’s checkout detail description with examples.

42 Tips and Tricks to Write Faster, Better-Optimized JavaScript Code

Atit Patel — Wed, 24 Feb 2021 15:34:20 +0000

Optimize your JavaScript code using modern techniques, tips, and tricks

I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I create tips for day to day Frontend development.

You might be doing JavaScript development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. This article can help you to prepare yourself for JavaScript interviews in 2021.

Here I am coming with a new series to cover some tips which helped me in my day-to-day coding.

1. Sort an array of objects by string property value

It can be done in different ways.

1. Using Underscore

`_.sortBy(collection, [iteratees=[_.identity]])`

Creates an array of elements, sorted in ascending order by the results of running each element in a collection thru each iteratee. This method performs a stable sort, that is, it preserves the original sort order of equal elements. The iteratees are invoked with one argument: (value).

var objs = [   { val1: 'abc',val2: 'a' },  { val1: 'cde', val2: 'b'  },  { val1: 'fgh', val2: 'c' }];

var sortedValues = _.sortBy( objs, 'val1' );

2. Using ES6 sort function

var data = [  { name: 'abc', value: 21 },  { name: 'cde', value: 37 },  { name: 'ee', value: 45 },  { name: 'ff', value: -12 },  { name: 'ab', value: 13 },  { name: 'cs', value: 37 }];

// sort by valuedata.sort(function (a, b) {  return a.value - b.value;});

3. Using Lodash

const sortedValues = _.sortBy(data, 'string');

2. How to Round to at most 2 decimal places (only if necessary)

There are 3 different ways we can achieve this function.

Let’s understand some definitions before jumping to the solutions.

The **_parseFloat()_** function parses an argument (converting it to a string first if needed) and returns a floating point number.

The **_toFixed()_** method formats a number using fixed-point notation.

Using ParseFloat

parseFloat("183.456").toFixed(2);

The **_Math.round()_** function returns the value of a number rounded to the nearest integer.

2. Using MathRound

Math.round( num * 100 + Number.EPSILON ) / 100

[_Number()_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)Creates a new _Number_ value.

Convert string to decimal

var string = 10.134.toFixed(2); // => '10.13'var num = Number(string); // => 10.13

12 Methods for Finding an Item in an Array (and Array of Objects) in JavaScript

12 Methods for Finding an Item in an Array (and Array of Objects) in JavaScript

_I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I…_medium.com

3. How do I loop through or enumerate a JavaScript Object?

Each ECMAScript version comp up with a different way to enumerate the Objects. Let’s check this out.

The **_Object.keys()_** method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

The **_forEach()_** method executes a provided function once for each array element.

ES5 (Object.keys() and forEach)

var data = { val1: "abc", val2: "cde" };

Object.keys(data).forEach(function(key) {    console.log(key, obj[key]);});

ES6 (for...of):

The **_for...of_** statement creates a loop iterating over iterable objects, including: built-in [_String_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [_Array_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), array-like objects (e.g., [_arguments_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) or [_NodeList_](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)), [_TypedArray_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray), [_Map_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [_Set_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

for (const key of Object.keys(data)) {    console.log(key, obj[key]);}

ES8 [**Object.entries()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)

The **_Object.entries()_** method returns an array of a given object's own enumerable string-keyed property _[key, value]_ pairs, in the same order as that provided by a [_for...in_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loop.

Object.entries(data).forEach(    ([key, value]) => console.log(key, value));

We can combine for...of, destructuring, and Object.entries:

for (const [key, value] of Object.entries(data)) {    console.log(key, value);}

4. What is the difference between event.preventDefault() and return false

with return false, there is a chance that other functions are getting executed which is specifically written inside the click while preventDefault won’t allow executing anything.

$('a').click(function (e) {  // logic

// runtime error...navigation happened

return false;});

Example of preventDefault()

$('a').click(function (e) {  e.preventDefault();

// logic

// runtime error, naviagation will not happen});

5. How can I check for an empty/undefined/null string in JavaScript?

if (!!data) {    // Some code here}

Or use type casting:

if (Boolean(data)) {    // Code here}

Both do the same function. Typecast the variable to Boolean, where str is a variable.

It returns false for null, undefined, 0, 000, "", false.

It returns true for string "0" and whitespace " ".

If you are looking to Optimize your JavaScript code using modern shorthand techniques, tips, and tricks check out this article.

34 JavaScript Optimization Techniques to Know in 2021

_Optimize your JavaScript code using modern shorthand techniques, tips, and tricks_medium.com

6. How to insert an item into an array at a specific index (JavaScript)?

Append Single Element at a specific index

//Append at index 2array.splice(2, 0,'newData');

//Append at index 5array[5] = 'newData';

Append Multiple Element at a specific index

//Append at index 2array.splice(2, 0,'data1', 'data2', 'data3');

7. How to Get the current URL with JavaScript?

Use windows function:window.location.href

How to Remove Duplicates from an Array or Array of Objects in JavaScript

How to Remove Duplicates from an Array or Array of Objects in JavaScript

_I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I…_medium.com

8. Checking if a key exists in a JavaScript object?

Using in operator

let data = "abc" in array;

Using hasOwnProperty

let result = data.hasOwnProperty("abc")

Accessing elements directly (brackets style)

let result = data["abc"] === undefined

Accessing elements directly (object style)

let result = array.abc === undefined;

9. How to merge two arrays in JavaScript and remove duplicate items?

We do play with arrays in day to day life and there are a lot of requirements where we need to combine arrays as well as need to remove duplicates.

Below are some approaches to achieve this.

1. Using Lodash

console.log(_.union([10, 4, 5], [134, 26, 19, 10], [6, 1]));

2. Using Filter and Concat

let a = [56, 43, 3], b = [11, 43, 56, 12]let c = a.concat(b)let d = c.filter((val, pos) => c.indexOf(val) === pos)

3. Using Set

[...new Set([...array1 ,...array2])]; //   => remove duplication

10. How to check whether a string contains a substring in JavaScript?

We can use the following two methods to achieve this function.

1. includes

The **_includes()_** method determines whether an array includes a certain value among its entries, returning _true_ or _false_ as appropriate.

const val1 = "atitpatel";const val2 = "patel";

console.log(string.includes(val2));

2. index of

The **indexOf()** the method returns the first index at which a given element can be found in the array, or -1 if it is not present.

var str = "atitpatel";var substr = "patel";

console.log(str.indexOf(substr) !== -1);

If you are looking for array and object-related tips please check out this article.

21 Arrays and Object Tricks in JavaScript/TypeScript

_I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I…_medium.com

11. How to replace all occurrences of a string?

We can use ES6 to handle this.

str = str.replace(/test/g, '');

We can use Regex.

let find = 'ab';

let re = new RegExp(find, '');

let str = find.replace(re, 'cd');

console.log(str);

12. How to correctly clone a JavaScript object?

Using ES6

var val1 = {data: "value"};var val2= Object.assign({}, val1);

If you want a shallow copy

Object.assign({}, data)

For a deep copy

JSON.parse(JSON.stringify(data))

13. What is the !! (not not) an operator in JavaScript?

!! converts the value to the right of it to its equivalent boolean value.

!!false === false           !!true === true

              !!0 === false!!parseInt("foo") === false // NaN is falsy              !!1 === true             !!-1 === true  // -1 is truthy          !!(1/0) === true  // Infinity is truthy

             !!"" === false // empty string is falsy          !!"foo" === true  // non-empty string is truthy        !!"false" === true  // ...even if it contains a falsy value

     !!window.foo === false // undefined is falsy           !!null === false // null is falsy

             !!{} === true  // an (empty) object is truthy             !![] === true  // an (empty) array is truthy;

14. How to Loop through an array in JavaScript

we have several options:

1. Sequential `for` loop:

var array = ["a","b"];var arrayLength = array.length;for (var i = 0; i < arrayLength; i++) {    console.log("value",array[i]);}

2. Array.prototype.forEach

const data = ["a", "b", "c"];

data.forEach(function (item, index) {  console.log(item, index);});

3. ES6 `for-of` statement

let data = ['a', 'b', 'c'];for (const a of data){    console.log(a);}

9 Methods for Sorting an Item in an Array (and Array of Objects) in JavaScript

9 Methods for Sorting an Item in an Array (and Array of Objects) in JavaScript

_I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I…_medium.com

15. How do I copy to the clipboard in JavaScript?

We can prompt the user to click and enter by doing this:

function copy(text) {  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}

Now the clipboard copy operation is SAFE because a user has clicked on the prompt.

<button id="data" onclick="copy(document.getElementById('data').innerHTML)">Copy here</button>

<script>  function copy(text) {    window.prompt("To Copy Please do this: Ctrl+C, Enter", text);  }</script>

22 Utility Functions To Ace Your JavaScript Coding Interview

22 Utility Functions To Ace Your JavaScript Coding Interview

_JavaScript Coding Assessment Cheatsheet 2021_js.plainenglish.io

16. How do I test for an empty JavaScript object?

There are several ways to achieve this function.

1.jQuery:

jQuery.isEmptyObject({}); // true

2. lodash:

_.isEmpty({}); // true

3. Underscore:

_.isEmpty({}); // true

17. How do I make the first letter of a string uppercase in JavaScript?

We can either update the CSS which has text-transform property.

In CSS:

p:first {    text-transform:capitalize;}

Using function we can call toUpperCase() method.

function makeUpperCase(val){    return val && val[0].toUpperCase() + val.slice(1);}

18. How can I change an element’s class with JavaScript?

There are a lot of requirements where we need to change some color or CSS based on conditions.

How it can be done in JavaScript?

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("test").className = "newclass";

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new class name, like so:

document.getElementById("test").className += " newClass";

To remove a class from an element:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("test").className =   document.getElementById("test").className.replace      ( /(?:^|\s)newClass(?!\S)/g , '' )

19. Is it possible to apply CSS to half of a character?

We do see some fancy word art where the half of the character have different color while other half have different color. How we can achieve something like this in CSS?

Below is the example to make apply CSS for half character.

h1 {  display: inline-block;  margin: 0; /* for demo snippet */  line-height: 1em; /* for demo snippet */  font-family: helvetica, arial, sans-serif;  font-weight: bold;  font-size: 300px;  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

<h1>XYZ</h1>

20. How to append something to an array?

In the older JavaScript version, it was done by using the apply method.

The **_apply()_** method calls a function with a given _this_ value, and _arguments_ provided as an array (or an array-like object).

let array1 = [33, 45, 5];let array2 = [100, 2];

Array.prototype.push.apply(array2, array1);

console.log(array2); // [100, 2, 33, 45, 5]

With ES6 it can be done using the spread operator.

let array1 = [11, 42, 53];let array2 = [1, 2];

array2.push(...array1);

console.log(array2); // [11, 2, 3, 42, 53]

Continue reading

How to Send data through routing paths in Angular

Atit Patel — Mon, 22 Feb 2021 00:50:40 +0000

Daily Angular Tips, Tricks, and Best Practices: Part 9

As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

Photo by Ben White on Unsplash

Recently, I was looking for the best techniques to write clean and optimize my angular code. I have gone through a lot of articles, and as we know, it is limitless. Then I thought of consolidating the checklist with different Basic Angular Topics which helped me and might help others too in the future.

These small articles not only help you to write a better and clean Angular Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.

Let’s move towards our main discussion.

Passing data between components is one of the common tasks which we do in frontend development. Sometimes when we don’t have state maintained in our application we can use the angular router feature to pass the data between the components.

We can achieve this like this using @angular/routerwhich does support the route state and navigationExtras, which takes an object literal similar to queryParams

Let’s checkout different approaches to achieve this functions.

1. Using Required Routing Parameters:

2. Using Route Optional Parameters:

3. Using Route Query Parameters:

4. Using Route NavigationExtras

It’s always better to see practicals instead of theory. No issue. I have a practical example ready for you. Check out here.

https://stackblitz.com/edit/angular-route-parameters-tu8g9e

If you missed previous parts checkout below:

What is the difference between constructor and ngOnInit?

Explain how Angular application loads/Initialize.

Explain the digest cycle/Change detection Cycle in Angular.

What is the difference between declarations, providers, and imports?

What is the difference between BehaviourSubject, Subject, ReplaySubject and Async Subject?

How To Detect Changes When An Angular Component Is Using ‘@input’

ES12 Features you should know in 2021

Atit Patel — Mon, 22 Feb 2021 00:47:46 +0000

Optimize your JavaScript Code with new ES2021 Features

Photo by Ben White on Unsplash

Let’s understand these features ES2021 features with examples.

1. replaceAll

The replaceAll() method returns a new string with all matches of a pattern replaced by the new replacement word.

The Pattern can be string or Regexp.

const p = 'my name is atit';

const regex = /atit/gi;

console.log(p.replaceAll(regex, 'patel'));  
// expected output: my name is patel

console.log(p.replaceAll('atit', 'patel'));  
// expected output: my name is patel

2. Promise.any()

It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.

const promise1 = Promise.reject(0);

const promise2 = new Promise((resolve) => setTimeout(resolve, 50, 'fast'));

const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value)); //fast

3. Weakref

This object holds a weak reference to another object without preventing that object from getting garbage-collected.

For example checkout below link

WeakRef

_A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting…_developer.mozilla.org

4. FinalizationRegistry

Lets you request a callback when an object is garbage collected.

For example checkout below link

FinalizationRegistry

_A FinalizationRegistry object lets you request a callback when an object is garbage-collected. FinalizationRegistry…_developer.mozilla.org

5. Private visibility modifier for methods and accessors

Class properties are public by default and can be examined or modified outside the class. There is however a stage 3 proposal to allow defining private class fields using a hash # prefix.

class TestClass {  
  #privateVariable  
}

class TestClass {  
  #privateMethod() {  
    return 'test'  
  }  
}

class TestClass {  
  static #PRIVATE_STATIC_FIELD  
}

6. Logical Operators

The logical OR assignment (x ||= y) operator only assigns if x is false.

const a = { duration: 50, title: '' };

a.duration ||= 10;  
console.log(a.duration);  
// expected output: 50

a.title ||= 'title is empty.';  
console.log(a.title);  
// expected output: "title is empty"

The logical AND assignment (x &&= y) operator only assigns if x is truthy.

let a = 1;  
let b = 0;

a &&= 2;  
console.log(a);  
// expected output: 2

b &&= 2;  
console.log(b);  
// expected output: 0

7. Numeric Separators

This is the feature that helps us to relieve some pain while reading large numbers.

const value = 1000000000000;

There is a feature in JavaScript that enables underscore as a separator in numeric literals to improve readability.

Example:

const value = 1_000_000_000_000;

You can also use this for binary, octal, and hex numbers.

const n1 = 0b1010_0101_1001; // binaryconst n2 = 0o2_3_5_7; // octalconst n3 = 0xA_B_C_D_E; // hex

8. Intl.ListFormat

This object enables language-sensitive list formatting.

const data = ['abc', 'test', 'cde'];

const formatter1 = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });  
console.log(formatter.format(data));  
// expected output: "abc, test, and cde"

const formatter2 = new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });  
console.log(formatter3.format(data));  
// expected output: "abc test cde"

9. Intl.DateTimeFormat

This object enables the language-sensitive date and time formatting.

// Specify default date formatting for language (locale)  
console.log(new Intl.DateTimeFormat('en-US').format(date));  
// expected output: "01/04/2021"

// Specify date and time format using "style" options (i.e. full, long, medium, short)  
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));  
// Expected output "Monday, 04 January 2021 at 14:23:16 GMT+11"

If you are looking to Optimize your JavaScript code using modern shorthand techniques, tips, and tricks check out this article.

34 JavaScript Optimization Techniques to Know in 2021

_Optimize your JavaScript code using modern shorthand techniques, tips, and tricks_medium.com

30 Friday Stress Relievers For Programmers

Atit Patel — Fri, 19 Feb 2021 14:38:57 +0000

Why programmers don’t Have Fun?

How to Set Values in Reactive Forms

Atit Patel — Thu, 18 Feb 2021 16:01:05 +0000

Daily Angular Tips, Tricks, and Best Practices: Part 8

As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

Let’s move towards our main discussion.

One of the most basic topics in any programming is creating forms and validate them. In Reactive forms when data comes from the backend or we might need to set the form values, we can achieve this by following different approaches. Let’s see how we can set the value to forms?

We can use the following methods to update the value of a reactive form control.

Methods using setValue()
Methods using patchValue()
We can update multiple controls in the form group if required using the PatchValue
We can use the set value by mapping the exact same JSON as a form group
When we have form array to patch values

To see practical example in details checkout here »

How I earned money from writing and went $0.55 to $2,200+ in 3 Months

Atit Patel — Wed, 17 Feb 2021 05:45:58 +0000

Photo by Markus Winkler onÂ Unsplash

Like everyone else, I started my Medium journey by reading different blogs. I bought a Medium subscription in July as I was restricted to read more stories.

When I joined Medium I had no intentions of trying to earn money from Medium and honestly speaking I had no clue about the Medium writing program. Crazy right?

One day suddenly I came across one topic about someoneâ€™s journey of earning some amount from the Medium and it motivated me to write and share my research and experiences about topics that most interviewers ask in Angular Interviews.

This was the first article I wrote in the Medium. (Note: I have recently changed title)

Advanced Angular interview questions you must prepare in 2021
Part 1medium.com

I have received 1 view/day after posting this article. I was so happy after seeing that someone is reading my article.

After writing one article, I started researching how I can share this article with others and how I can enhance my views and basically make more money.

9942 views/day on JanuaryÂ 15

When I got $0.55 USD in my bank I have decided next time I will make more for sure.

My first month earnings:

I started writing more and more which helped me to learn and adapt to different styles. Next month I earned $120.98 and then went to $670.71.

Below are different monthâ€™s earning details:

Tips

Below are the things I started considering in my Medium journey and this formula helped me to reach my goals.

1. Publications

As Publications have a lot of followers it helps us to build audience and views.

2. Social Media and Promotions

Social media helps a lot to improve your article views. What I learned is donâ€™t afraid to share your work with the world. People may laugh but you will learn a lot eventually.

3. Title

I have found from a lot of research that the title should be more appealing for users to read your article.

4. Content andÂ SEO

What I found while searching in Google that when you search for a specific word sometimes Google picks your content word in the match.

5. Start WritingÂ More

What I learn if you write more, you get an idea of how you can improve your writing skills as well as how you can engage more users.

Below are the numbers.

September: 1 Story
October: 23 Stories
November: 34 Stories
December: 21 Stories
January: 20+ Stories

6. SupportÂ Others

Start appreciating other's work. This can help you make friends in Medium.

7. FacebookÂ groups

You can learn a lot from other groups about writing in Medium. Below are some groups: Medium Writing Medium Writers Lounge, Medium Writers and Bloggers

8. Donâ€™t expect success rightÂ away

Don't be upset about your work if it is not getting more views or curated. Good things take time.

9. User ProperÂ tags

It is better to use proper tags to get an idea to see the stories related to tags.

10. Formatting

If you read a lot of articles you will find the success of stories depends on how they formatted and how it is conveying messages to users. For example, this format helped me a lot: Introduction, Image, Content, Summary, Source, Recommendations.

JavaScript In Plain English has a Style Guide which can help you a lot with this. Link below:

How to write articles that people want to read
Here are a list of recommendations that the â€˜In Plain Englishâ€™ team consider to be best practices when writing articlesâ€¦medium.com

11. Images

Yeah! Images can help a lot. You can use Unsplash.

Example: https://medium.com/javascript-in-plain-english/13-methods-to-remove-filter-an-item-in-an-array-and-array-of-objects-in-javascript-2211216790d5

12. Modify yourÂ stories

There might be chances that the stories that have not gained enough views, in the beginning, can get success now. You can modify the content and republish your stories with newer content and ideas to gain more attention.

13. Schedule your PublishÂ times

I have seen a couple of times if I publish my story in the morning people tend to read more compare to other times. You can schedule a specific time to publish your stories.

14. Publish Story Next day after a quickÂ read

I found this strategy very helpful to find any mistakes in my story. If I publish the same day there are chances I donâ€™t see any errors as I am in hurry to publish my story. This can be avoided by publishing a story on the next day after reviewing it with a fresh mind.

15. Spelling mistakes &Â Grammar

You can use Grammarly which helps me a lot to correct my spellings.

So what you are waitingÂ for?

â€œSuccess will never be a big step in the future, success is a small step taken just now.â€ â€• Jonatan MÃ¥rtensson

I would like to thank JavaScript In Plain English, and Sunil Sandhu for guiding me and supporting me in thisÂ journey.

Checkout some of my popular articles.

22 Utility Functions To Ace Your JavaScript Coding Interview

Atit Patel — Wed, 17 Feb 2021 05:06:15 +0000

JavaScript Coding Assessment Cheatsheet 2021

One type of JavaScript coding interview question you might encounter will involve you writing 1–2 lines of code for a given question. These questions are usually simple enough to answer in 5 minutes, but sometimes we struggle with them due to the pressure of the interview. These functions will help to prepare for your JavaScript Interviews in 2021.

To reduce the pressure at times let’s get prepared ahead of time!

Photo by Patrick Perkins on Unsplash

1. Remove Duplicates from an Array

Arrays: these are some handy methods that we can use to remove duplicates from an array.

Using lodash

let array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let arrayuniq = .uniq(array);//[2, 1, 5, 6, 7, 8, 9, 10]

2. Using the filter

let array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let list = array.filter((x, i, a) => a.indexOf(x) == i);

//[2, 1, 5, 6, 7, 8, 9, 10]

3. Using Set

let array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let setuniq = [...new Set(array)];

//[2, 1, 5, 6, 7, 8, 9, 10]

2. Remove Duplicates from Array of Objects

Arrays of Objects: these are some handy methods that we can use to remove duplicates from an array of objects.

Using lodash

let users = [

{ id: 1, name: "ted" },

{ id: 1, name: "bob" },

{ id: 3, name: "sara" },

{ id: 4, name: "test" },

{ id: 4, name: "test" },

{ id: 5, name: "abc" }

];

let uniqueUsersByID = _.uniqBy(users, "id");

//[{"id":1,"name":"ted"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

We can check unique data with multiple properties with this code.

const uniquewithMultipleProperties = _.uniqWith(
    users,
    (a, b) => a.id === b.id || a.name === b.name
);
//[{"id":1,"name":"ted"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

2. Using a filter

let filteruniquebyID = users.filter(
    (v, i, a) => a.findIndex(t => t.id === v.id) === i
);
//[{"id":1,"name":"ted"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

We can check unique data with multiple properties with this code.

let filteruniquebyIDName = users.filter(
    (v, i, a) => a.findIndex(t => t.id === v.id || t.name === v.name) === i
);
//[{"id":1,"name":"ted"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

3. Using Set

var set1 = Array.from(

users.reduce((m, t) => m.set(t.id, t), new Map()).values()

);

//[{"id":1,"name":"bob"},{"id":3,"name":"sara"},{"id":4,"name":"test"},{"id":5,"name":"abc"}]

You can check stackblitz here.

https://stackblitz.com/edit/remove-duplicates-arrayofobjects

3. Find an item in Array

below are some methods to find an item in the array

includes: this method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

console.log(array.includes(2)); // returns true

2. every: this method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

let testevery1 = array.every(val=> val>3); //false

3. some: this method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

let testsome1 = array.some(val=> val>3); //true

4. lodash includes: checks if value is in collection .Returns true if value is found, else false.

let lodashtest9 =.includes(array, 1); // true

let lodashtest10 =.includes(array, 3, 2); // false

5. findIndex: this method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

let  testindex = array.findIndex(val => val > 1);
//0

6. find: this method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined are returned.

let testfind = array.find(el => (el > 2));
//5

7. filter: this method creates a new array with all elements that pass the test implemented by the provided function.

let testfilter1 = array.filter(val=> val>3);
//[5, 6, 7, 8, 9, 9, 10]

8. map: this method creates a new array populated with the results of calling a provided function on every element in the calling array.

let val = [];
array.map(item => { if(item >= 3) val.push(item); });
//[5, 6, 7, 8, 9, 9, 10]

You can check stackblitz here.

https://stackblitz.com/edit/find-item-array

4. Find an item in the Array of Objects

these are the methods that can be used to find an item in the array of objects.

1. every: this method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

let testevery2 = users.every(val=> val.id>3);
//false

2. some: this method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

let testsome2 = users.some(val=> val.id>3); //true

3. lodash includes: checks if value is in collection .Returns true if value is found, else false.

let lodashtest11 =.includes({ 'a': 1, 'b': 2 }, 1);
//true
let lodashtest12 =_.includes('abcd', 'bc');
//true

4. findIndex: this method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

let  testindex2 = users.findIndex(val => val.id > 1);
//3

5. find: this method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined are returned.

let testfind2 = users.find(el => (el.id > 2));
//{"id":3,"name":"sara"}

6. filter: this method creates a new array with all elements that pass the test implemented by the provided function.

let testfilter2 = users.filter(val=> val.id>3);

7. map: this method creates a new array populated with the results of calling a provided function on every element in the calling array.

let val2 = [];

users.map(item => { if(item.id >= 3) val2.push(item); });

You can check stackblitz here.

https://stackblitz.com/edit/find-item-array

5. Sort Array items

Arrays can be sort using the sort method.

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

DEV Community: Atit Patel

I Earned Over $4000 In 4 Months on Medium

My Medium Journey with JavaScript in Plain English, and how I ended up earning over 4000 USD in 4 months

1. Cross-posting

2. Twitter

1. Engaging with more people.

2. Exposing a small amount of content to my tweets

3. Using proper tags while tweeting

3. LinkedIn and Facebook groups

4. Writing more and more.

So what you are waiting for?

12 Tips To Help You Stay Motivated While Learning To Code

How To Keep Motivating Yourself While Learning To Code

Top Programming Blogs in 2021

Best Programming Blogs to Master Your Coding Skills in 2021

51 JavaScript Features covered from ES12 to ES5 you might not know yet

51 techniques to optimize and clean your code

Table of Contents

ES2021/ES12

22 Utility Functions To Ace Your JavaScript Coding Interview

ES2019/ES10

ES2018/ES9

ES2017/ES8

ES2016/ES7

ES2015/ES6

42 Tips and Tricks to Write Faster, Better-Optimized JavaScript Code

Optimize your JavaScript code using modern techniques, tips, and tricks

1. Sort an array of objects by string property value

1. Using Underscore

_.sortBy(collection, [iteratees=[_.identity]])

2. Using ES6 sort function

3. Using Lodash

2. How to Round to at most 2 decimal places (only if necessary)

12 Methods for Finding an Item in an Array (and Array of Objects) in JavaScript

3. How do I loop through or enumerate a JavaScript Object?

4. What is the difference between event.preventDefault() and return false

5. How can I check for an empty/undefined/null string in JavaScript?

If you are looking to Optimize your JavaScript code using modern shorthand techniques, tips, and tricks check out this article.

6. How to insert an item into an array at a specific index (JavaScript)?

7. How to Get the current URL with JavaScript?

How to Remove Duplicates from an Array or Array of Objects in JavaScript

8. Checking if a key exists in a JavaScript object?

9. How to merge two arrays in JavaScript and remove duplicate items?

10. How to check whether a string contains a substring in JavaScript?

1. includes

2. index of

11. How to replace all occurrences of a string?

12. How to correctly clone a JavaScript object?

13. What is the !! (not not) an operator in JavaScript?

14. How to Loop through an array in JavaScript

1. Sequential for loop:

2. Array.prototype.forEach

3. ES6 for-of statement

9 Methods for Sorting an Item in an Array (and Array of Objects) in JavaScript

15. How do I copy to the clipboard in JavaScript?

16. How do I test for an empty JavaScript object?

1.jQuery:

2. lodash:

3. Underscore:

17. How do I make the first letter of a string uppercase in JavaScript?

18. How can I change an element’s class with JavaScript?

19. Is it possible to apply CSS to half of a character?

20. How to append something to an array?

How to Send data through routing paths in Angular

Daily Angular Tips, Tricks, and Best Practices: Part 9

1. Using Required Routing Parameters:

2. Using Route Optional Parameters:

3. Using Route Query Parameters:

4. Using Route NavigationExtras

ES12 Features you should know in 2021

Optimize your JavaScript Code with new ES2021 Features

1. replaceAll

2. Promise.any()

3. Weakref

4. FinalizationRegistry

5. Private visibility modifier for methods and accessors

6. Logical Operators

7. Numeric Separators

8. Intl.ListFormat

9. Intl.DateTimeFormat

`_.sortBy(collection, [iteratees=[_.identity]])`

1. Sequential `for` loop:

3. ES6 `for-of` statement