DEV Community: Suren

Console API - Debugging Like A PRO - Javascript

Suren — Tue, 06 Jul 2021 16:15:01 +0000

Console API of Javascript scripts provide a lot more than just console.log. Here are some of my observations & learning on the **Console API. Also, a few tips that I use for logging are added at the end - Feel free to stick till the end.

1. console.log & similar ones

This is what is used by most developers to print something in the developer console. But there are a few more console methods that could improve our development experience. Some of them are below,

debug => same as log, but has a log level of debug.
error => same as log, but has a log level of error & add red background to the message.
info => same as log, but has a log level of info.
warn => same as log, but has a log level of warn & adds blue background to the message.

*Syntax: *console.log(obj1 [, obj2, ..., objN]); console.log(msg [, subst1, ..., substN]);

2. console.count

Ever confused about how many times the recursive call or a loop is executed? count method of the Console API covers this.

*Syntax: *console.count('label')

3. console.group

When the group method of Console API is called, the subsequent logs are printed in a group. Also, we can use a group inside a group to create an inner loop. The groups are ended when the console.groupEnd() is called. Additionally, if you want your groups to be collapsed, you can use console.groupCollapsed() instead of console.group().

This could be super useful when you have a log statement in a function and you can surround the function caller with group and group end to differentiate the results.

*Syntax: * console.group([label]);console.groupCollapsed([label]);console.groupEnd([label]);

4. console.dir & console.table

console.dir & console.table are used for clear representations of object properties and array element properties more clearly.
*Syntax: * console.dir(Object); console.log(Array<Object>);

5. console.time

console.time is used to register a timer to track in the global level and whenever we need a time elapsed during the execution, we can call console.timeLog(). Also to end a timer, we can call console.timeEnd. We can run multiple timers by passing a label param to the console.time([label]) method.

*Syntax: * console.time(label); console.timeLog(label); console.timeEnd(label);

Smart Logging

I usually have the habit of appending the name of the variable while logging the value to the console. The following helped a lot of time during various debug sessions. Hope you find this useful.

Hope you find this useful. If there are any tip and trick for logging, please add in the comments. Let me know if it could be improved in the comments and feel free to follow on Twitter - radnerus93

Designing the Print Preview - Chrome Dev Tools

Suren — Sun, 03 Jan 2021 13:03:10 +0000

Have you ever wondered, how would your webpage look when printed? 🤔 And you don't have a printer? or you don't want to waste a ton of papers for development?

Chrome dev tools got you covered!

Following are the steps to check your print preview in Chrome,

Step 1: Open developer Tools - Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

Step 2: Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu.

Step 3: Type rendering, select Show Rendering, and then press Enter.

Step 4: rendering window will be available now. Under Emulate CSS media select print.

Normal View

Print View

Let's consider, as per requirement, we don't need to show the social icons at the bottom while printing the page. For changing a particular CSS attribute while printing, we need to get the 'CSS Selector' of the elements that need to change. In our scenario, all the social icons have a class of .social. Adding the below media query to our styles will hide the social icons only during print.

@media print {
    .social {
        display: none;
    }
}

And voila,

Hope you find this useful. Let me know if it could be improved in the comments and feel free to follow on Twitter - radnerus93

NaN - It's Not A Number🙄

Suren — Sat, 22 Aug 2020 14:15:39 +0000

According to MDN,

NaN is a property of the global object. In other words, it is a variable in global scope.

The initial value of NaN is Not-A-Number — the same as the value of Number.NaN. In modern browsers, NaN is a non-configurable, non-writable property. Even when this is not the case, avoid overriding it. It is rather rare to use NaN in a program.

Hear the value of NaN is Number.NaN. But, wait!

NaN === Number.NaN // false

Maybe because of the type you think🤔

NaN == Number.NaN // false

Somewhat reasonable explanation started here when I followed the links.

With a lot of confusion around NaN, let us see how we could arrive at a value of NaN.
There are 5 different operations which could result in NaN.

Numbers that can't be parsed

parseInt('Integer') ⇒ NaN
Number('%^@#') ⇒ NaN

Math operation where the result is not a real number

Math.sqrt(-1); ⇒ NaN

The operand of an argument is NaN

NaN + 20 ⇒ NaN
60 * NaN ⇒ NaN

Indeterminate form

0 * Infinity ⇒ NaN

Any operation that involves a string and is not an addition operation

"Integer" * 5 ⇒ NaN

For geekier discussions, reach out to me on twitter at @radnerus93, 📥 DM always open.

TypeScript Functional Decorators w/ usecases

Suren — Fri, 07 Aug 2020 12:22:49 +0000

Generally, decorators in programming are used to add some additional meaning/function to a method, variable or a class.

I have used a lot of decorators while working in Spring Boot. I am currently learning Typescript and decorators fascinated me. Here is a small illustration of my use case for typescript decorators for functions.

Consider a Human class which maintains the stamina attribute and it is manipulated by run and rest methods. We need to capture the value of stamina before and after both, the actions - run and rest. I have added snippets for the code with and without decorators.

Code Before Decorators

class Human {
    stamina: number;
    constructor(stamina: number) {
        this.stamina = stamina;
    }

    run(requiredStamina: number): number {
        return (this.stamina -= requiredStamina);
    }

    rest(addedStamina: number): number {
        return (this.stamina += addedStamina);
    }
}

const human = new Human(10);
console.log(`Stamina before run: ` + human.stamina);
human.run(1);
console.log(`Stamina after run: ` + human.stamina);
console.log(`Stamina before rest: ` + human.stamina);
human.rest(12);
console.log(`Stamina after rest: ` + human.stamina);
console.log(`Stamina before run: ` + human.stamina);
human.run(20);
console.log(`Stamina after run: ` + human.stamina);
// Stamina before run: 10
// Stamina after run: 9
// Stamina before rest: 9
// Stamina after rest: 21
// Stamina before run: 21
// Stamina after run: 1

The above code looks good but soon the file would be cluttered with boilerplates.

Code with Decorators

class Human {
    stamina: number;
    constructor(stamina: number) {
        this.stamina = stamina;
    }

    @log
    run(requiredStamina: number): number {
        return (this.stamina -= requiredStamina);
    }

    @log
    rest(addedStamina: number): number {
        return (this.stamina += addedStamina);
    }
}
function log(
    target: Object,
    propertyKey: string,
    descriptor: TypedPropertyDescriptor<any>
) {
    const originalMethod = descriptor.value; // save a reference to the original method

    // NOTE: Do not use arrow syntax here. Use a function expression in
    // order to use the correct value of `this` in this method (see notes below)
    descriptor.value = function (...args: any[]) {
        // pre
        console.log(`Stamina before ${propertyKey}: ` + args);
        // run and store result
        const result = originalMethod.apply(this, args);
        // post
        console.log(`Stamina after ${propertyKey}: ` + result);
        // return the result of the original method (or modify it before returning)
        return result;
    };

    return descriptor;
}

const human = new Human(10);
human.run(1);
human.rest(12);
human.run(20);
// Stamina before run: 1
// Stamina after run: 9
// Stamina before rest: 12
// Stamina after rest: 21
// Stamina before run: 20
// Stamina after run: 1

I have added comments in the snippet explaining the flow of data in the decorator! Simply put, decorators are invoked before the function is invoked and also has access to the arguments and the return value which could be used by the decorator.

There an N use cases for decorators in general. Let me know some interesting use case in the comment or reach out to me at radnerus93.

Twitter API is 🔥 - Followers Count

Suren — Wed, 01 Jul 2020 15:17:32 +0000

I see a lot of tweeting platforms, which give you the power to send scheduled tweets, retweets, like all the comments for your tweets, always retweet you fav handle, and so on in Twitter. All these come at a cost, most of them are reasonable.

But this got me thinking and I did some surfing around the net. Then I realized Twitter provides free API (of course with a limit) for developers with small apps.

I added my app, started testing the API and I could replicate some of the Awesome functionalities that the paid services could offer.

An interesting thing I did was creating a bot that reads my followers count and appends that to my Twitter profile's Display Name.

Below are some of the few keys steps in achieving this✨

Go to Twitter's developer page and register your app to get the tokens.
All major languages have an add-on/module available for twitter integration. I have used, Tweepy for Python and Twitter Lite for NodeJS.
⚡️ Provide the required authentication and clean check the docs for all the available endpoints.
After the initial setup is done, the next step would be to get the followers count and writing it to the display name.
⚡️ Follower count - this could be fetched from one of 2 APIs,
✨GET followers/ids ✨GET users/show
⚡️ Updated Display Name - to update the profile information to update the use POST account/update_profile by sending the display name with the appended followers count in the name property of the request.
Run a cron job which calls and repeats the above steps in the refresh duration that you want😉

To test more on this implementation, check my profile😉

🆂🆄🆁🅴🅽 | 👨🏻‍💻 | 8️⃣2️⃣1️⃣

@radnerus93

The followers count in my Display Name updates once every minute ✨
If you are not following me, to check if really works, click the follow button, give it a minute and then refresh 🤖

#100DaysOfCode #DevCommunity

14:57 PM - 30 Jun 2020

To look cool, you have multiple pics and use the API to ser them as your display picture at different times of the day🔥

Do follow on twitter to get connected and DM me your comments. Since I have just started to write, do send you love and criticism, both would be equally appreciated😉

Spread ... The Love In JavaScript ❣️

Suren — Mon, 25 May 2020 12:50:40 +0000

As per the MDN, below is the definition of the Spread Operator in JavaScript.

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

As a fan of clean code, I always fancied the use of Spread (...) operator. Below are some the useful implementations of the Spread operator.

Deep Copy Array

// Deep Copy Array
const sourceArray = [1, 2, 3, 4];
const copiedArray = sourceArray;
const copiedArrayUsingSpread = [...sourceArray];

sourceArray.pop();

console.log(copiedArray); // [ 1, 2, 3 ]
console.log(copiedArrayUsingSpread); // [ 1, 2, 3, 4 ]

Deep Copy Object - Single Level

As per Naina comments in discussion, deep copy works only with single level object. The spread operator will not be able to deeply copy the nested object.

// Deep Copy Object
const person = { name: 'John' };
const copiedPerson = person;
const copiedPersonUsingSpread = { ...person };
person.name = 'Doe';

console.log(copiedPerson); // { name: 'Doe' }
console.log(copiedPersonUsingSpread); // { name: 'John' }

Array Concatenation

// Array concatenation
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const joinedArray = [...arr1, ...arr2];
console.log(joinedArray); // [ 1, 2, 3, 4, 5, 6 ]

Object Property Concatenation

// Object concatenation
const obj1 = { prop1: 'value1' };
const obj2 = { prop2: 'value2' };

console.log({ ...obj1, ...obj2 }); // { prop1: 'value1', prop2: 'value2' }

As Function Params

Functions in javascript can have required and optional params. Sometimes the there can be n optional params and this is where the ... operator comes in. Sometimes it may be referred to as Rest operator.

const numbers = [1, 5, 7, 2, 3, 4, 5, 7, 90];
console.log(Math.max(...numbers)); // 90

const multiplyBy = (multiplier, ...numbers) => {
  console.log(numbers.map((num) => num * multiplier));
};

multiplyBy(2, 1, 2, 3, 4, 5, 6); // [ 2, 4, 6, 8, 10, 12 ]

Hope the above snippets explain themselves. Let me know on how I could improve the contents in the comment section or tweet @radnerus93. To stay more connect you could follow me on twitter @radnerus93.

DENO ANAGRAM of NODE?

Suren — Sun, 17 May 2020 18:21:24 +0000

Almost everywhere I look (twitter, tech blogs and dev.to), there is DENO. I was tempted and every time I open the comments of the tweets or posts, I see that DENO is an anagram of NODE. Then started the fun of naming new runtimes with the anagrams of NODE/DENO, like ODEN.js, ENDO.js and DONE.js. The context of some were hilarious. I made few comments on them myslef,

𝚂𝚞𝚛𝚎𝚗 👨🏻‍💻 𝙹𝚊𝚟𝚊𝚜𝚌𝚛𝚒𝚙𝚝 🚀🔆

@radnerus93

@nialljoemaher Hope ppl are D O N E with this soon🙇‍♂️

08:04 AM - 17 May 2020

After seeing this, I started googling A N A G R A M and found some interesting results. Then the math came in - Permutation and the things got more interesting.

One of the perks of being a developer is, we could build what we like, what excites us or what we find interesting. Started implementing the math of the Anagram and the result is, I created the site below,

Link: Anagram Generator | Surendar Vinayagamoorthy

Source Code: Anagram Generator | GitHub

Any comments/suggestion would be appreciated. Also I took up the #100DaysOfCode challenge in twitter, follow me here for feedbacks and some cool JavaScript tips and tricks.

Javascript Destructuring - Extraction (The Fun Way🧑🏽‍💻)

Suren — Sat, 16 May 2020 15:13:44 +0000

Struggle of every developer is to minimize the boilerplate and maximize the efficiency. This is where the Destructuring pitches in for JavaScript, to make it more understandable, simple and a clean one.

Object Destructuring

   const { propertyName1, propertyName2 } = objectName;

Liquid error: internal
As mentioned above example, the 3 lines used for extracting 3 properties (name, age & gender) from the person object, is reduced to a single line using shorthand destructuring. If we need to extract N properties to variables, we would need N statements, but we could do that in 1 statement using destructuring.

Array Destructuring

   // Convention Using Index
   const element1 = array[0];
   const element2 = array[1];
   // Destructuring
   const [ element1, element2, ...remaining ] = array;

Liquid error: internal
Conventionally elements of the array are extracted using the index of the element, but using ES6 destructuring we can get the values of the mentioned indexes in a single statement. Also by using the ... - spread operator, we could collect the remaining elements as array into a single variable.

Aliases

   // Alias name
   const { propertyName: aliasName } = objectName;

Liquid error: internal
Aliases helps in extracting similar properties from different objects. This finds many real-time application in modern programming.

Defaults

   // Default values - Object
   const { propertyName = defaultValue } = objectName;
   // Default values - Array
   const [ element1 = value1, element2 = value2 ] = array;

Liquid error: internal
Sometimes, we might not be sure if the property is present in the required object or an element in a particular index position, but those values returning as undefined would break the application. This is where the default values come in.

Functional Param - Destructuring

The above mentioned concepts can be used for the destructuring the incoming object or array in the method signatures. Hope the below snippet explains them.

   const welcomeUser = ({ name: username = 'Anonymous', topics }) => {
      // Moved the below logic to the function signature.
      // const {name: username = 'Anonymous', topics} = user;
      console.log(`${username} has subscribed to the following topics - 
                   ${topics.join(', ')}`);
   }
   welcomeUser({
      name: 'John Doe',
      topics: ['nodejs', 'javascript', 'deno']
   });
   // John Doe has subscribed to the following topics - nodejs, javascript, deno

   welcomeUser({
      topics: ['react', 'javascript', 'angular']
   });
   // Anonymous has subscribed to the following topics - react, javascript, angular

I have recently started with the #100DaysOfCode challenge in Twitter. Follow on here to stay connected and improve each other.

Thanks for reading this far. This is my first attempt in writing a technical blog, any feedback would be appreciated.