DEV Community: Shameel Uddin

Logical OR (||) vs. Nullish Coalescing (??) For Default Values

Shameel Uddin — Thu, 30 Nov 2023 16:11:14 +0000

Using `||` for default values

If you are coding in JavaScript for a while so you must be using || in many places, especially in conditionals.

But sometimes, we often use || to assign default values.

For example, sometimes, during some calculations, we might get null (falsy value) from backend API but we don't want to show null as such, we want to show 0.
So, we might do something like this:

// Simulating a scenario where a backend API returns a null number
const returnedPriceFromAPI = null;

// Using the || operator to assign a default value if the returned number is falsy
const calculatedPrice = returnedPriceFromAPI || 0;

console.log(calculatedPrice) // 0

Similar example for strings can be given below:

// Simulating a scenario where a backend API returns a null string
const returnedNameFromAPI = null;

// Using the || operator to assign a default value if the returned name is falsy
const displayName = returnedNameFromAPI || "Anonymous";

console.log(displayName); // "Anonymous"

In this example, if returnedNameFromAPI is falsy (null in this case), we default to the string "Anonymous."

💡 This can be particularly handy when you want to ensure that you always have a meaningful value to work with, even if the API response is not as expected.

Should you always use `||` ?

I would not advise that. Why?

Logical OR operator uses the right side value if the left side one is falsy and even though it works perfectly fine but we all know in JavaScript, undefined or null does not mean false so we have nullish operator specifically to deal with null and undefined so it is advised to use that instead and follow standard code practices.

In JavaScript, falsy does not mean undefined or null.

Look at this:


console.log(true || "shameel"); // true
console.log(false || "shameel"); // "shameel"

console.log(0 || "shameel"); // "shameel"
console.log(1 || "shameel"); // 1

console.log("uddin" || "shameel"); // "uddin"
console.log("" || "shameel"); // "shameel"

console.log(undefined || "shameel"); // "shameel"
console.log(null || "shameel"); // "shameel"

Using `??` for default values

nullish strictly means null or undefined. Nothing else. It can be considered as a subset of falsy.

So, if your intention is to use default values when something received is null or undefined ONLY then you must prefer ??.

Lets look at this:


console.log(true ?? "shameel"); // true
console.log(false ?? "shameel"); // false

console.log(0 ?? "shameel"); // 0
console.log(1 ?? "shameel"); // 1

console.log("uddin" ?? "shameel"); // "uddin"
console.log("" ?? "shameel"); // ""

console.log(undefined ?? "shameel"); // "shameel"
console.log(null ?? "shameel"); // "shameel"

I hope the blog helps you in some way :)

Please let me know if any correction is required elsewhere or a better advice =)

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

How we misuse naming boolean and how they should be named

Shameel Uddin — Tue, 28 Nov 2023 10:05:54 +0000

Boolean is a pretty cool data type which we often use in our conditionals.
The blog explains how they should be named properly for the sake of clean coding practices in our codebase.

Positive over Negative

Banish the confusion of double negatives! Instead of drowning in a sea of "not," embrace clarity.

❌ if (!isNotUser)

✅ if (isUser)

Adjectives, Not Actions

Break free from mundane verbs and nouns! Elevate your boolean game with descriptive adjectives or short, snappy phrases.

❌ if (sendEmail)

✅ if (emailIsSent)

Present Tense

Time-traveling through tenses adds unnecessary noise. Stick to the present tense for clean, coherent code.

❌ if (hasBeenSubscribed)

✅ if (isSubscribe)

Proper use of Prefix

Boost readability with prefixes like is/has/should/can. Your code will thank you later!

❌ if (membership)

✅ if (hasMembership)

Avoid confusing true/false - Employ Enums!

Wave goodbye to mysterious true/false values. Embrace the power of enums for self-documenting code.

❌ bookMeeting(customer, true)

❌ bookMeeting(customer, false)

✅ bookMeeting(customer, Discount.Applied)

✅ bookMeeting(customer, Discount.NotApplied)

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

JavaScript's Grouping Methods: Object.groupBy and Map.groupBy 🤯

Shameel Uddin — Fri, 24 Nov 2023 13:53:49 +0000

JavaScript, the language that powers the dynamic and interactive web, is constantly evolving to make developers' lives easier. This blog is the introduction of two powerful methods for grouping data: Object.groupBy and Map.groupBy. 🤯

These methods promise to simplify grouping operations, eliminating the need for external dependencies and enhancing the overall development experience.

What's the Buzz About?

groupBy methods aim to streamline process of grouping data, offering a native and efficient solution for grouping objects and maps.

Object.groupBy

Let's start by exploring Object.groupBy. This method is designed to work with arrays of objects, making it a valuable addition for handling complex datasets.

const employees = [
  { name: 'Shameel', department: 'HR' },
  { name: 'Uddin', department: 'Engineering' },
  { name: 'Syed', department: 'HR' },
];

// Grouping employees by department using Object.groupBy
const groupedByDepartment = Object.groupBy(employees,({department})=>department)
console.log(groupedByDepartment);

In this example, employees are grouped by their respective departments, resulting in a clear and concise structure.

Result:

{
    "HR": [
        {
            "name": "Shameel",
            "department": "HR"
        },
        {
            "name": "Syed",
            "department": "HR"
        }
    ],
    "Engineering": [
        {
            "name": "Uddin",
            "department": "Engineering"
        }
    ]
}

Map.groupBy

The Map.groupBy method extends the grouping capabilities to Map objects, providing a versatile solution for scenarios where a Map structure is preferred.

const inventory = [
  { name: '🥦 broccoli', type: 'vegetables', quantity: 9 },
  { name: '🍌 bananas', type: 'fruit', quantity: 5 },
  { name: '🐐 goat', type: 'meat', quantity: 23 },
  { name: '🍒 cherries', type: 'fruit', quantity: 12 },
  { name: '🐟 fish', type: 'meat', quantity: 22 },
];

const restock = { restock: true };
const sufficient = { restock: false };

// Using Map.groupBy to categorize items based on quantity
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient
);

// Displaying items that need restocking
console.log(result.get(restock));

Here, orders are grouped by the product they contain, showcasing the flexibility and expressiveness of the Map.groupBy method.

Conclusion

The beauty of these new methods lies in their simplicity. They abstract away the complexity of manual grouping, providing a clean and expressive syntax. No more lengthy code or external dependencies – just pure JavaScript magic!

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

✈️ Create JavaScript Function On The Fly

Shameel Uddin — Fri, 10 Nov 2023 09:41:39 +0000

In this blog, I will try to explain you something really cool. Not just statically writing a function but to create function on the fly which is done with the help of function constructor.

Function Constructor

In JavaScript, functions are first-class citizens, meaning they can be treated like any other data type.

The Function constructor takes advantage of this, allowing you to create functions from strings.

Example 1

const addFunction = new Function('a', 'b', 'return a + b');
console.log(addFunction(5, 3)); // Output: 8

The new Function syntax takes parameters as strings, followed by the function body as the last string. It's like writing a function declaration in a string and then creating a real function from it.

Example 2

function createCalculator(operation) {
  if (['add', 'subtract', 'multiply', 'divide'].includes(operation)) {
    return new Function('a', 'b', `return a ${operation} b`);
  } else {
    throw new Error('Invalid operation');
  }
}

const add = createCalculator('add');
const subtract = createCalculator('subtract');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Pros of Using the Function Constructor

Following are the advantages of using function constructor:

Dynamic Code Execution:

You can create and execute code dynamically, which is handy for scenarios where you need to generate functions or plugins on-the-fly.

Customizable Functions:

It allows you to customize functions based on user input or configuration, making your code more versatile.

Interoperability:

It's a bridge between different programming languages. You can run code written in other languages like Python or Ruby through JavaScript by converting it into a JavaScript function.

Cons and Considerations

Following are the disadvantages of using Function Constructor:

Security Risks:

Creating functions from user-provided strings can be a security risk. Malicious code could potentially be injected and executed. Always validate and sanitize user input.

Performance Overheads:

Using the Function constructor can be slower than regular function declarations. Avoid frequent usage in performance-critical sections of your code.

Readability:

Code generated with the Function constructor may be harder to read and debug, so use it sparingly and document your intentions clearly.

Practical Usage

The function constructor can be used in real-life projects in various scenarios where dynamic code generation or customization is required. Here are some practical applications:

Plugin Systems

You can use the function constructor to allow users to define and load plugins dynamically. For example, in a content management system, users might create custom templates or extensions for their websites, and these can be turned into executable functions using the function constructor.

Math Expression Evaluation

It's useful for building calculators or math-related applications where users input mathematical expressions as strings, which are then converted into executable functions. This is often seen in scientific calculators or data analysis tools.

Rule Engines

In business or game development, you can use the function constructor to implement rule engines. Rules can be defined as functions in string format, and then you can execute these rules based on certain conditions or user-defined criteria.

Code Generation

When you need to generate JavaScript code dynamically, such as for code generators or transpilers. This is commonly seen in tools like Babel, which convert modern JavaScript code into older versions that are compatible with various browsers.

Customization and Configuration

You can allow users to customize the behavior of your application through configuration files. Users can write functions in a configuration file that are then transformed into executable code using the function constructor.

Remote Script Execution

In some situations, you might receive JavaScript code from a remote server and execute it. This can be a risky endeavor, so it should be approached with caution, as it can open security vulnerabilities if not properly validated and sanitized.

⚠️ Be Aware

While the function constructor offers great flexibility in these scenarios, it should be used carefully and sparingly. Always validate and sanitize user inputs, and consider the potential security risks and performance implications when incorporating it into your projects.

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

↩️Clean Coding Tip: Early Return Principle

Shameel Uddin — Thu, 09 Nov 2023 07:47:20 +0000

Have you ever looked at a piece of code and got confused a bit due to many nested if statements, one inside another?

Clean code is all about making your code

Readable
Maintainable
Easy to understand.

In this blog, we'll discuss a simple coding tip to enhance the clarity of your JavaScript code: Avoiding Nested IF with Early Return Principle.
We'll break down the concept of clean code and provide coding examples in simple JavaScript.

What is Clean Code?

Clean code is like a well-organized book. It's easy to read, easy to maintain, and easy to understand. When you write clean code, it's like telling a clear and concise story with your program. You want your code to be a joy to work with, not a puzzle that needs solving.

The Problem with Nested IF Statements

When you nest IF statements, you increase the complexity of your code. It's like stacking multiple puzzles on top of each other, making it harder to figure out the logic. Nested IF statements can quickly lead to confusion and errors, especially in larger codebases.

Look at this coding example:

function calculatePrice(item) {
  if (item.type === 'book') {
    if (item.pages > 500) {
      return item.price * 0.9;
    } else {
      return item.price * 0.95;
    }
  } else {
    return item.price;
  }
}

Solution With Early Return Principle

Writing clean code is a skill that can be learned and improved with practice. One of the fundamental principles of clean code is the "early return" principle.

This principle suggests that you should exit a function as soon as the necessary conditions are met, rather than creating layers of nested IF statements.

Above code can be simplified as:

function calculatePrice(item) {
  if (item.type !== 'book') {
    return item.price;
  }

  if (item.pages > 500) {
    return item.price * 0.9;
  }

  return item.price * 0.95;
}

💡 The idea is to have as simplified if statements as possible and return if the conditions are met; instead of nesting them down.

Conclusion

Clean code is an essential aspect of software development. By following the early return principle and merging nested IF statements into one condition, you can greatly improve the readability of your JavaScript code.

Keep practicing this skill, and your code will become a joy to work with, not a source of confusion.

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Guide To Learn Dayjs

Shameel Uddin — Wed, 08 Nov 2023 06:25:47 +0000

Introduction

Playing with dates in JavaScript is a difficult task which is why there are supporting libraries, one of the most famous is moment.js which has become a legacy project as we discussed earlier.
One of the proposed alternatives is day.js which itself is cool library to work efficiently with dates. I have used it for over a year and have gained good grasp over it.

Why should you go with Day.js?

Millions of downloads
Actively maintained
Easier to work with
2kB alternative to Moment.js + Moment.js compatible APIs
Works with browser + Node.js
Returns new instance (prevents bugs)

Getting Started With Dayjs

It is very simple. You can find the guide for Node.js here and for Browser, you can find it here. If you are into TypeScript like myself, this should help you setting dayjs up.

I am working with Node.js in JavaScript enviorment. The version of dayjs is ^1.11.10. Mentioning it here since any breaking change could be introduced in the future.

If you are following this guide, please do this:

Prepare your environment:

npm init

Install dayjs with the exact version:

npm install dayjs@1.11.10

Create a file "index.js" and import dayjs:

const dayjs = require('dayjs')

This is my minimalistic setup for preparing this guide:

Dayjs Basics

Wrapper of Date object is created by Day.js. Day.js object itself is immutable (i.e., cannot be changed). Any API operation performed in it for manipulation or any other purpose will return new instance.

Dayjs() Object For Current Time

Lets explore dayjs a bit:

console.log(dayjs());

It is exactly same as this:

console.log(dayjs(new Date()));

It returns this current date in this object format:

{
  '$L': 'en',
  '$d': 2023-11-07T09:49:35.970Z,
  '$y': 2023,
  '$M': 10,
  '$D': 7,
  '$W': 2,
  '$H': 14,
  '$m': 49,
  '$s': 35,
  '$ms': 970,
  '$x': {},
  '$isDayjsObject': true
}

Dayjs Object For Specific Time

We can also politely ask dayjs to return the object for the date of our choice... Like this:

dayjs('12-12-2023');

or like this:

dayjs(new Date(2023, 8, 8))

It returns this:

{
  '$L': 'en',
  '$d': 2023-12-11T19:00:00.000Z,
  '$y': 2023,
  '$M': 11,
  '$D': 12,
  '$W': 2,
  '$H': 0,
  '$m': 0,
  '$s': 0,
  '$ms': 0,
  '$x': {},
  '$isDayjsObject': true
}

Formatting Dates

Dayjs provides multitude of options for you to format the date which you want to display to the users.

For example, this:

dayjs('2023-12-23').format('DD/MM/YYYY') // '23/12/2023'

You can find the entire table for formatting here.

Working with plugins

Dayjs provides set of plugins which helps your tasks easier.

In order to work with plugins, you have to first import it and then extend it with day.js like this:

const dayjs = require("dayjs");
const isToday = require("dayjs/plugin/isToday");
dayjs.extend(isToday);
console.log(dayjs("11-07-2023").isToday()); // true

The plugin above will help you determine if the date entered is of today or not.

Cool plugins

Some of the really cool ones which can help you save hours (if working with native dates) are as follows:

Following will help you determine if the provided date is of yesterday, today or tomorrow by returning a boolean response:

isToday
isYesterday
isTomorrow

You should explore other ones as per your project needs here.

Display Options

You can display dayjs objects as follows:

JavaScript Date

console.log(dayjs("2023-12-23").toDate());

String

dayjs('2019-01-25').toString() // 'Fri, 25 Jan 2019 02:00:00 GMT'

JSON

dayjs('2023-01-12').toJSON() // '2023-01-12T02:00:00.000Z'

Array

dayjs.extend(toArray)

dayjs('2023-01-12').toArray() // [ 2023, 0, 12, 0, 0, 0, 0 ]

Object

dayjs.extend(toObject)

dayjs('2023-01-23').toObject()
/* { years: 2023,
     months: 0,
     date: 23,
     hours: 0,
     minutes: 0,
     seconds: 0,
     milliseconds: 0 } */

Manipulation

You can do any sort of manipulation. Like adding or subtracting time of any format with the Date object.

Adding Time

You can add time like this:

const date1 = dayjs();
const date2 = date1.add(2, "day");
console.log(date2);

date1 is not changed when date1.add is applied. This is what I meant by immutability earlier.

Subtracting Time

Subtraction happens like this:

const date1 = dayjs();
const date2 = date1.subtract(2, "day");
console.log(date2);

Finding Start or End of Time

Dayjs allows you to find start or end of the month or year. Mostly it's used for months.

dayjs().startOf('year')
dayjs().endOf('year')

Finding Difference Between Two Dates:

This is something which is somehow used in many projects so I thought to mention this scenario in the guide as well.
You can find the differences between the two dates like this:

const firstDate = dayjs("2023-06-20");
const secondDate = dayjs("2022-11-11");
console.log(firstDate.diff(secondDate));

By default it gives response in milliseconds:

19094400000

But you can also change it to day, month or year.
For example like this:

firstDate.diff(secondDate, "month") // 7

If you want a very specific answer with decimal points value then do this:

firstDate.diff(secondDate, "month", true) // 7.290322580645161

Working with UTC

In my project, I had to work with UTC because of tiemzone issues. Dayjs provide seamless solution for this with the help of plugin.

From official docs here, you can see, it works as simple as this:

dayjs.extend(utc)

var a = dayjs()
a.format() //2019-03-06T08:00:00+08:00
a.utc().format() // 2019-03-06T00:00:00Z

Timezone

You can also work with multiple timezones with the help of another super cool plugin.

Mentioning the example from official docs here:

dayjs.extend(utc)
dayjs.extend(timezone)

// current time zone is 'Europe/Berlin' (offset +01:00)
// Parsing
dayjs.tz("2013-11-18 11:55:20", "America/Toronto") // '2013-11-18T11:55:20-05:00'

// Converting (from time zone 'Europe/Berlin'!)
dayjs("2013-11-18 11:55:20").tz("America/Toronto") // '2013-11-18T05:55:20-05:00'

We used to store the timezone of the user in database and then use the string in .tz method to get the timezone of the user and have it displayed.

It can also be used to guess the timezone of the user. Like this:

dayjs.tz.guess() // America/Chicago

i18n

If your project includes internationalization then don't worry. Dayjs got you covered here as well.

You can find how to load it in Node.js project here and for browser, you can find the details here.

This gives you access to locale which you can either use for instance or in global manner. The details are mentioned in the docs mentioned above.

Conclusion

This blog serves as a guide for you to decide whether you should choose dayjs for your next project or not. I tried to include what I used in my own project over the year.

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Simplifying JavaScript Code with Object Destructuring

Shameel Uddin — Tue, 07 Nov 2023 07:11:30 +0000

Introduction

In my previous blog, I discussed the art of Simplifying JavaScript Code with Object Destructuring. Today, let's delve deeper into the concept of Object Destructuring, with insightful coding examples and a comprehensive overview of its benefits.

What is Object Destructuring?

Object destructuring is a powerful feature in JavaScript that allows you to extract values from objects and bind them to variables with a single, elegant line of code.

It's like unwrapping a gift box filled with data and organizing its contents in a way that makes sense for your code.

Here's the basic syntax of object destructuring:

const { key1, key2, ... } = yourObject;

You can use this syntax to pick specific properties from an object and assign them to variables, making your code more concise and improving its readability.

Cool Coding Examples

Now, let's dive into some awesome examples that showcase the beauty and power of object destructuring.

Variable Assignment:

Object destructuring allows you to assign object properties to variables with ease. Imagine you have an object representing a user's information:

   const user = {
     name: "Shameel Uddin",
     age: 99,
     email: "shameel.uddin@example.com"
   };

   const { name, age, email } = user;

   console.log(name); // "Shameel Uddin"
   console.log(age); // 99
   console.log(email); // "shameel.uddin@example.com"

By using object destructuring, you can easily access the user's information without repetitive object notation.

Function Parameter Destructuring:

Object destructuring is extremely useful when working with function parameters. You can destructure the object directly in the function parameter list, making your code clean and expressive:

   function printUserInfo({ name, age, email }) {
     console.log(`Name: ${name}, Age: ${age}, Email: ${email}`);
   }

   printUserInfo(user); // "Name: Shameel Uddin, Age: 99, Email: shameel.uddin@example.com"

This approach eliminates the need to access object properties within the function body.

Default Values:

Object destructuring also allows you to set default values for properties that may not exist in the object, avoiding unexpected errors:

   const { name, age, country = "Unknown" } = user;

   console.log(country); // "Unknown" (as 'country' is not present in the 'user' object)

This can be especially handy when working with API responses or configuration objects.

Benefits of Object Destructuring

Object destructuring brings a plethora of benefits to your JavaScript code:

Clarity and Readability: It makes your code more concise and easier to understand, reducing the clutter of object notation.
Saves Typing: You save keystrokes by not having to repeat the object name multiple times when accessing its properties.
Default Values: You can handle missing properties gracefully with default values, reducing the risk of errors.
Function Parameters: Function parameter destructuring simplifies your code and makes the function signature self-explanatory.
Renaming Variables: You can rename variables while destructuring, allowing you to create more descriptive variable names.

💡 Object destructuring is not limited to simple objects. It can be used with nested objects and arrays as well, making it a versatile tool in your JavaScript toolkit.

Conclusion

In conclusion, object destructuring is a JavaScript feature that adds elegance, simplicity, and readability to your code. It's a magical way to extract and organize data from objects, making your code more enjoyable to write and maintain.

Happy coding! 🎉💻✨

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

JavaScript Variable: Declaration vs. Initialization

Shameel Uddin — Mon, 06 Nov 2023 08:10:18 +0000

In programming, variable declaration and initialization are two fundamental concepts that involve creating and assigning values to variables. Here's what each term means:

Variable Declaration:

Example:

   var shameel

Declaring a variable means, that we are just creating the container at the moment.
var is the keyword that is used to declare the variable.
Name of the variable is shameel. You can give any name here considering it is not against the rules of variable in JavaScript.

Variable Initialization:

Example:

   shameel = 1

Initializing a variable means, we assign a value to it right after its creation in one command/line

You can combine variable declaration and initialization in a single step as well:

var shameel = 1

Declaration and Initialization for var, let and const

`let`:

You can declare a variable with let.
You can initialize a variable with let.
You can both declare and initialize a variable with let in a single step.

Example:

   let age; // Declaration
   age = 25; // Initialization
   let name = "John"; // Declaration and initialization in one step

`var` (not recommended in modern JavaScript):

You can declare a variable with var.
You can initialize a variable with var.
You can both declare and initialize a variable with var in a single step.

Example:

   var x; // Declaration
   x = 10; // Initialization
   var y = 20; // Declaration and initialization in one step

`const`:

You can declare a variable with const, but you must initialize it at the same time. You cannot declare a const variable without an initial value.
You cannot reassign a new value to a const variable after it's been initialized. It remains constant.

Example:

   const pi = 3.14; // Declaration and initialization in one step
   // You cannot do this: const e; // Error: Missing initializer in const declaration
   // You cannot do this: pi = 3.14159; // Error: Assignment to constant variable

In summary, you can both declare and initialize variables using let and var. With const, you must declare and initialize the variable in a single step, and it cannot be reassigned after initialization.

Side note

It's important to note that not all programming languages handle variable declaration and initialization in the same way, and the rules can vary. Some languages require variables to be explicitly declared before use, while others may allow variables to be implicitly declared upon initialization. Understanding these concepts is essential for writing correct and efficient code in any programming language.

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Temporal - A trustworthy alternative for (legacy) moment.js ?

Shameel Uddin — Sat, 04 Nov 2023 22:20:36 +0000

I recently wrote a post about moment.js that it has become legacy and suggested some alternatives like dayjs, luxon and date-fns and found out about Temporal being developed by TC39.

Going down the history line, Date was actually copied from java.Util.Date and evolved from there. Date is something which is used in almost any type of project you do and you know well that you have to rely on external libraries if complexities occur in calculation or manipulations of date.

Since moment.js has become legacy, Temporal could be a very well prospect to move forward with. The really cool part is that, it is a global Object that acts as a top-level namespace.

I find it really cool by the top level looks of it. Let me know how you find it =)

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Moment.js Is Now Legacy Project | Alternatives?

Shameel Uddin — Fri, 03 Nov 2023 07:39:20 +0000

If your project deals with complex date and time then you probably have been use to of moment.js. Be aware, Moment.js has become a legacy project. You can check the project status here,

We now generally consider Moment to be a legacy project in maintenance mode.

Furthermore,

 It is not dead, but it is indeed done.

So, what's next?

Go for these:

dayjs

Fast 2kB alternative to Moment.js with the same modern API. I myself have used this for more than a year and found it really cool, easy and super helpful.

Get started here:
https://day.js.org/docs/en/installation/installation

date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Get started here:
https://date-fns.org/docs/Getting-Started

luxon

A powerful, modern, and friendly wrapper for JavaScript dates and times.

Get started here:
https://moment.github.io/luxon/#/?id=luxon

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

JavaScript Variable: Should you choose let, var or const?

Shameel Uddin — Thu, 02 Nov 2023 13:56:18 +0000

Introduction

In JavaScript, variables play a fundamental role in storing and managing data. There are three main ways to declare and initialize variables: var, let, and const. Each has its own characteristics and use cases. Let's explore each of them in depth, along with examples:

`var`:

var was the original way to declare variables in JavaScript, and it has some unique behaviors and quirks.
Variables declared with var are function-scoped, meaning their scope is limited to the function in which they are declared.
Variables declared with var are hoisted, which means that they are moved to the top of their containing function or global scope during the compilation phase. However, their assignments remain in place.

   function varExample() {
     if (true) {
       var x = 10;
     }
     console.log(x); // 10
   }

   console.log(x); // undefined (hoisted but not initialized)

`let`:

let was introduced in ECMAScript 2015 (ES6) and offers block-level scoping.
Variables declared with let are not hoisted to the top of their scope, and they are only accessible within the block they are defined in.

   function letExample() {
     if (true) {
       let y = 20;
     }
     console.log(y); // ReferenceError: y is not defined
   }

`const`:

const is also introduced in ES6 and has similar block-level scoping as let.
However, variables declared with const cannot be reassigned after their initial value is assigned. They must be initialized upon declaration.

   function constExample() {
     const z = 30;
     // z = 40; // Error: Assignment to constant variable
     console.log(z); // 30
   }

When to use each type:

Don't use var, as it has some unexpected behavior and can lead to subtle bugs. It's best to use let or const instead.
Use let when you need to reassign the variable's value within the same block.
Use const when the value should never change after initialization. It's a good practice to use const for variables that represent constants or values that should not be reassigned.

Practical Example:

Here's a more practical example showing the differences between let and const:

function variableExamples() {
  // Using let for reassignable variables
  let counter = 0;
  counter = 1;
  console.log(counter); // 1

  // Using const for constants
  const pi = 3.14159;
  // pi = 3.14; // Error: Assignment to constant variable
  console.log(pi);

  // Using var (not recommended)
  if (true) {
    var age = 25;
  }
  console.log(age); // 25 (function-scoped)
}

variableExamples();
// console.log(counter); // ReferenceError: counter is not defined
// console.log(pi); // ReferenceError: pi is not defined
// console.log(age); // 25 (still accessible, not block-scoped)

My Advice?

My personal advice is to always start with const. When you feel the need that it should be changed then make it let. Never go for var.

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

OAuth 2.0 - What is it?

Shameel Uddin — Mon, 30 Oct 2023 10:05:44 +0000

OAuth is not as complicated as it sounds! 😅 Let's break it down in a fun and simple way so even beginners can grasp it.

What is OAuth 2.0? 🤔

OAuth 2.0 is like the VIP pass for your online accounts. It lets you share your Facebook pics, Twitter tweets, or Spotify playlists with other apps without giving away your super-secret password. 🤐

Why is it Necessary? 🤷‍♀️

Imagine you have a cool fitness app 🏋️‍♀️ that wants to post your workout achievements on your Facebook. Without OAuth, you'd have to give your fitness app your Facebook login and password 😱. That's a big NO-NO for security!

OAuth 2.0 solves this problem by acting like a bouncer at the club. It keeps your password safe and only lets in the app you choose, just for the things you want to share. 🤗

Where is OAuth 2.0 Used? 🌐

Social Media Login: You've seen those "Log in with Google" or "Sign in with Facebook" buttons? That's OAuth 2.0 at work. No need to create new accounts everywhere.
API Access: Many apps use OAuth to let you access their data or services, like your favorite weather app fetching data from a weather website.
Mobile Apps: If you use apps on your phone, chances are they're using OAuth behind the scenes to connect to your other accounts.

How Does OAuth 2.0 Work? 🕵️‍♂️

Let's use the example of your fitness app and Facebook:

You open your fitness app and click on "Share on Facebook."
The app says, "Hey, I want to share your workouts on Facebook."
Facebook, like a vigilant gatekeeper 🛡️, asks you, "Are you cool with this fitness app sharing your data?"
You say, "Sure, I trust my fitness app."
Facebook gives the fitness app a special token. This token is like a one-time access card to post on your behalf. It's not your password, and it can't be used to log in.
The fitness app uses this token to post your achievements on Facebook.

Why Is OAuth 2.0 Important? 🌟

Security: Your passwords stay locked in a vault. No more sharing them with every app you use. 🔐
Convenience: Easier access to your favorite apps. No more remembering a zillion passwords. 🤯
Control: You decide what data you want to share and with whom. Your data, your rules! 🙌

So, there you have it! OAuth 2.0 makes your online life simpler, safer, and more connected. Next time you see "Log in with..." or "Authorize this app," you'll know what's going on behind the scenes.

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

DEV Community: Shameel Uddin

Logical OR (||) vs. Nullish Coalescing (??) For Default Values

Using || for default values

Should you always use || ?

Using ?? for default values

How we misuse naming boolean and how they should be named

Positive over Negative

Adjectives, Not Actions

Present Tense

Proper use of Prefix

Avoid confusing true/false - Employ Enums!

JavaScript's Grouping Methods: Object.groupBy and Map.groupBy 🤯

What's the Buzz About?

Object.groupBy

Map.groupBy

Conclusion

✈️ Create JavaScript Function On The Fly

Function Constructor

Example 1

Example 2

Pros of Using the Function Constructor

Dynamic Code Execution:

Customizable Functions:

Interoperability:

Cons and Considerations

Security Risks:

Performance Overheads:

Readability:

Practical Usage

Plugin Systems

Math Expression Evaluation

Rule Engines

Code Generation

Customization and Configuration

Remote Script Execution

⚠️ Be Aware

↩️Clean Coding Tip: Early Return Principle

What is Clean Code?

The Problem with Nested IF Statements

Solution With Early Return Principle

Conclusion

Guide To Learn Dayjs

Introduction

Why should you go with Day.js?

Getting Started With Dayjs

Dayjs Basics

Dayjs() Object For Current Time

Dayjs Object For Specific Time

Formatting Dates

Working with plugins

Cool plugins

Display Options

JavaScript Date

String

JSON

Array

Object

Manipulation

Adding Time

Subtracting Time

Finding Start or End of Time

Finding Difference Between Two Dates:

Working with UTC

Timezone

i18n

Conclusion

Simplifying JavaScript Code with Object Destructuring

Introduction

What is Object Destructuring?

Cool Coding Examples

Variable Assignment:

Function Parameter Destructuring:

Default Values:

Benefits of Object Destructuring

Conclusion

JavaScript Variable: Declaration vs. Initialization

Variable Declaration:

Variable Initialization:

Declaration and Initialization for var, let and const

let:

Using `||` for default values

Should you always use `||` ?

Using `??` for default values

`let`:

`var` (not recommended in modern JavaScript):

`const`:

`var`:

`let`:

`const`: