DEV Community: Muhammad Ovi

Callback hell OR try catch hell (tower of terror)

Muhammad Ovi — Fri, 18 Jun 2021 20:58:13 +0000

What are "Callbacks"?

A callback function is usually used as a parameter to another function.

The function that receives callback function is normally fetching data from a database, making an API request, downloading a file, which usually takes a while.

Assume getting some data from the API and the request takes around 2 seconds to complete.

Now, you can either wait for the API call to complete and then display your UI,

OR, you show everything else and show a loader where the API data needs to be shown.

In the API function, we pass some sort of "call back" function that replaces loader with actual data, so once the response is received from API

It calls the callback function with the data and, then our callback function replaces the loader.

Let's see this in action:

function getDataFromAPI(callbackFunction) {
  fetchSomeData().then((data) => {
    callbackFunction(data);
  });
}

getDataFromAPI(function replaceLoaderWithData(data) {
  // your awesome logic to replace loader with data
});

// from w3schools
function myDisplayer(sum) {
  document.getElementById('demo').innerHTML = sum;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

Okay, you already know this. We're not learning what callbacks are.

What is "callback hell"?

If your application logic is not too complex, a few callbacks seem harmless.
But once your project requirements start to increase, you will quickly find yourself piling layers of nested callbacks.

Like this:

getAreas(function (areas) {
  getTowns(function (towns) {
    getCities(function (cities) {
      getCountries(function (countries) {
        getContinents(function (continents) {
          getPlanets(function (planets) {
            getSolarSystems(function (solarSystems) {
              getGalaxies(function (galaxies) {
                // Welcome to the callback hell...
              });
            });
          });
        });
      });
    });
  });
});

Of course, we can use JavaScript's Promise and move to .then & .catch.

getAreas().then(function (areas) {
  getTowns().then(function (towns) {
    getCities().then(function (cities) {
      getCountries().then(function (countries) {
        getContinents().then(function (continents) {
          getPlanets().then(function (planets) {
            getSolarSystems().then(function (solarSystems) {
              getGalaxies().then(function (galaxies) {
                // Welcome to the callback hell AGAIN...
              });
            });
          });
        });
      });
    });
  });
});

Congrats! Welcome to Callback Hell.

Callback Hell, also known as Pyramid of Doom, is a slang term used to describe an unwieldy number of nested “if” statements or functions.

Async Await to the rescue!

Async await feels like heaven because it avoids the callback hell or pyramid of doom by writing asynchronous code in a clean line-by-line format.

The above code changes to this:

// assuming the environment supports direct async function
const areas = await getAreas();
const towns = await getTowns();
const cities = await getCities();
const countries = await getCountries();
const continents = await getContinents();
const planets = await getPlanets();
const solarSystems = await getSolarSystems();
const galaxies = await getGalaxies();

😳😲😳
// now this... looks awesome!!!

BUT...

This is awesome until error handling comes into play because you end up with the try-catch tower of terror!

All your beautiful one-liners magically expand to at least five lines of code...

// assuming the environment supports direct async function

try {
  const areas = await getAreas();
} catch (err) {
  // handleError(err)
}

try {
  const towns = await getTowns();
} catch (err) {
  // handleError(err)
}

try {
  const cities = await getCities();
} catch (err) {
  // handleError(err)
}

try {
  const countries = await getCountries();
} catch (err) {
  // handleError(err)
}

// ... and so on.

You can find yourself an easy way which is simply by appending the catch method to the end of each promise.

// assuming the environment supports direct async function
const areas = await getAreas().catch((err) => handleError(err));
const towns = await getTowns().catch((err) => handleError(err));
const cities = await getCities().catch((err) => handleError(err));
const countries = await getCountries().catch((err) => handleError(err));
const continents = await getContinents().catch((err) => handleError(err));
const planets = await getPlanets().catch((err) => handleError(err));
const solarSystems = await getSolarSystems().catch((err) => handleError(err));
const galaxies = await getGalaxies().catch((err) => handleError(err));

This looks better, but! This is still getting repetitive.

Another better option is to create a standardized error handling function.

The function would first resolve the promise then returns an array.

In that array, the first element is the data and the second element is an error.

If there's an error then the data is null and the error is defined, like this:

async function promiseResolver(promise) {
  try {
    const data = await promise();
    return [data, null];
  } catch (err) {
    return [null, err];
  }
}

Now when you call this function in your code you can destructure it to get a clean one-liner with error handling,
Or use a regular if statement if you want to do something else with the error.

Your main function would look something like this:

// assuming the environment supports direct async function
const [areas, areasErr] = await promiseResolver(getAreas);
const [towns, townsErr] = await promiseResolver(getTowns);
const [cities, citiesErr] = await promiseResolver(getCities);

if (citiesErr) {
  // do something
}

const [countries, countriesErr] = await promiseResolver(getCountries);
const [continents, continentsErr] = await promiseResolver(getContinents);
const [planets, planetsErr] = await promiseResolver(getPlanets);
const [solarSystems, solarSystemsErr] = await promiseResolver(getSolarSystems);
const [galaxies, galaxiesErr] = await promiseResolver(getGalaxies);

if (galaxiesErr) {
  // do something
}

// ... and so on.

That's all folks! Hope you found this helpful, see you in the next one 😉

20 JavaScript One-Liners That Will Help You Code Like a Pro

Muhammad Ovi — Sat, 08 May 2021 21:02:29 +0000

JavaScript keeps growing and growing, opening doors for new
"to be tech geeks" in the market as it's one of the easiest languages to start. (is it really?)

It's true that JavaScript can do a lot of blazing things! and there is just so much to learn.

And whether you’re new to JavaScript or more of a professional developer it’s always good to learn something new.

I'm gonna go over some really helpful one-liners (20 + Bonus) that can help you boost your productivity and can help in debugging code.

What is a one-liner actually?

A one-liner is a code practice in which we perform some function in just one line of code.

01 - Get a random boolean

This function will return a boolean (true or false) using Math.random() method.
Math.random creates a random number between 0 and 1, after which we check if it is higher or lower than 0.5.
That means it's a 50/50 chance to get either true or false.

const getRandomBoolean = () => Math.random() >= 0.5;

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false

02 - Check if the date is Weekend

By this function, you'll be able to check if the date that is provided is either a weekday or weekend.

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)

03 - Check if a number is even or odd

Simple utility function to check if a number is even or odd.

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true

04 - Get the unique values in an array

A very simple method to remove all duplicate values from an array. This function converts our array to a Set and then back to an array.

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]

05 - Check if a variable is an array

A clean and easy way to check if a variable is an array.

Well, there can be other ways too 😉

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false

06 - Generate a random number between two numbers

This will take two numbers as params and will generate a random number between those two numbers!

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50

07 - Generate a random string (unique id?)

Maybe you need to create a temporary unique id for something, here's a trick you can use to generate a random string on the go.

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!

08 - Scroll to the top of the page

The window.scrollTo() method takes an x and y coordinate to scroll to.
If we set these to zero and zero, we’ll scroll to the top of the page.

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();

09 - Toggle boolean

Toggling a boolean value is one of the very basic programming problems, that can be solved in a lot of different ways.
Instead of using if-statements to determine what value to set the boolean to, you could instead use the function to flip the current value using the ! "not" operator.

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);

10 - Swapping Two Variables

The below code is one of the simpler ways to swap two variables without using a third variable and with just one line of code.

[foo, bar] = [bar, foo];

11 - Calculate number of days between two dates

To calculate the days between two dates,
we first find the absolute between two dates and then divide it with 86400000 which is equal to milliseconds in a single day, and at the end, we round the result and return it.

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199

12 - Copy text to clipboard

PS: You might need to add a check to see if navigator.clipboard.writeText exists

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};

13 - Different ways of merging multiple arrays

There are a couple of ways to merge arrays. One of them is using the "concat" method. Another one is using the spread operator ("…").

PS: We can also any duplicates from the final array using the "Set" object.

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

14 - Get the actual type of javascript primitives

People sometimes use libraries to find the actual type of something in JavaScript, this small trick can save your time (and code size).

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function

15 - Truncate string at the end

Need to truncate string from the end, not a problem!

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString('Hi, I should be truncated because I am too loooong!', 36),
);
// Hi, I should be truncated because...

16 - Truncate string from the middle

How about truncating the string from the middle?

This function will take a string as the first param, then the size of string we need as 2nd argument, then how many chars we need from the start and end in 3rd and 4th param.

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    'A long story goes here but then eventually ends!', // string
    25, // total size needed
    13, // chars to keep from start
    17, // chars to keep from end
  ),
);
// A long story ... eventually ends!

17 - Capitalizing a string

Well, unfortunately, JavaScript does not have a built-in function to capitalize string, but this workaround can help you obtain the goal.

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize('hello world'));
// Hello world

18 - Check if the current tab is in view/focus

This simple helper method returns true or false depending on if a tab is in view/focus

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false

19 - Check if the user is on an Apple device

This will return true if the user is on an Apple device

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false

20 - The Ternary Operator

This is a great code saver when you want to write an if..else statement in just one line.

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = 'You are not old enough';
} else {
  greetings = 'You are young!';
}

// Shorthand
const greetings = age < 18 ? 'You are not old enough' : 'You are young!';

Bonus - Short-circuit Evaluation Shorthand

When assigning a variable value to another variable, you may want to ensure that the source variable is not null, undefined, or empty.
You can either write a long if statement with multiple conditionals, or use a short-circuit evaluation.

// Longhand
if (name !== null || name !== undefined || name !== '') {
  let fullName = name;
}

// Shorthand
const fullName = name || 'buddy';

That's all folks! Hope you found this helpful, do not forget to add your email to the mailing list on my website 😉

Why NodeJS for Microservices?

Muhammad Ovi — Mon, 26 Apr 2021 09:18:04 +0000

Why use Node.js for Microservices?

Node.js is gaining popularity because of its remarkable features,

Handling multiple I/O (input/output) requests in a non-blocking way (event-driven non-blocking I/O), which helps in performance enhancement and scalability.

What is a microservice architecture?

“The microservice architectural style is an approach to developing a single application as a suite of small services,

each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.”
— Martin Fowler

Microservices refer to the software design pattern, to disintegrate big apps into a collection of smaller and simpler apps.

Individually, the apps could be testable, maintainable, as well as deployable.

Besides, they’re loosely coupled and organized around particular business aptitudes, thus it could be considered a business-oriented way of software development.

Okay so, back to the question:

Why should we use Node.js for Microservices?

Node.js is a very well-suited candidate for microservices.

Netflix, LinkedIn, PayPal, and many big brands have switched to Node.js to reap its benefits for their systems.

Netflix 🚀: Switching from Java to Node.Js has helped Netflix to improve its application performance to a great extent. The switch has also reduced its startup time by 70% (from 40 minutes to 1 minute).
LinkedIn 🚀: Moving from Ruby on Rails to Node.Js has helped them to improve the performance and efficiency of the application by 20 times, thereby reducing the infrastructure cost by 90% for serving the same traffic.
PayPal 🚀: Moving from Java to Node.Js has helped them to reduce the infrastructure cost by 50% to scale the same load. Their lines of code were also reduced by 1/3rd, which ultimately reduced the code maintenance effort.

Developing microservices with Node.js has become a standard today as it is easy to set up and also helps in reducing the development time. It has a lower memory footprint and better performance than Java/C# that helps in cost optimization.

Conclusion

JavaScript might be the most misunderstood language in the world but developers enjoy working with Node.js and microservices because of ease of development, hassle-free scaling, and cost control under high traffic instances.

Don’t hesitate to pick up Node.js for your next microservice, innovative organizations already utilize this tactical Node.js and microservices combination to achieve augmented productivity and high performance while lowering costs.

That's all folks! Hope you found this helpful, do not forget to add your email to the mailing list on my website 😉

Virtual DOM vs DOM (Real DOM)

Muhammad Ovi — Thu, 05 Dec 2019 22:42:18 +0000

I’m Ovi a MERN Stack developer!
So the topic today is “Virtual DOM vs DOM”,

First, this is an example of DOM:

The DOM is actually the object-based abstraction of your code which is being shown on the page!

DOM (Real/Browser DOM)

DOM takes all the HTML elements and wraps them in an object with a tree-structure — like the image above. This provides an API that allows us to directly target any specific node (HTML element) and do what we want like adding more child/parent nodes, removing, editing it’s content and blah blah blah...

Virtual DOM

On the other hand, Virtual DOM is an abstraction of your Real DOM but it’s pretty light-weight than the Real DOM — It has all the same properties as the Real DOM object but it can’t write and show things to the screen like Real DOM. It’s extremely fast as compared to the Browser’s DOM — It can produce about 200,000 Virtual DOM Nodes / Second 😲

That was a short intro of DOM and DOM — I mean the Real DOM and the Virtual DOM 😃

I hope you understood what I said 😜

Let’s meet in the next post.
Till then, Sayonara! (Good-Bye)

If you found this story useful, you know what to do now. Give it a ❤️ and follow me to get more articles and tutorials on your feed. 😜😉