Forem: Olufemi obafunmiso

How to use Console.time() and Console.timeEnd() to make informed decisions.

Olufemi obafunmiso — Mon, 06 Sep 2021 10:14:46 +0000

As an engineer, especially when working on enterprise-grade applications, your coding is influenced by many factors. It is no longer about what function worked or your ability to achieve your desired result. It is rather about writing a performant code, thinking about time complexity vs space complexity, scaling, and ensuring that your application is as fast as possible.

In this tutorial, I'll be showing you how to make an informed decision using Javascript console Object methods console.time() and console.timeEnd(). Yeah, I know you're used to console.log().

To understand this, I'll be using a stopwatch to illustrate. Let's assume you wanted to start a race, you would start your stopwatch and when the race ends, you would stop your stopwatch. See console.time() as starting your stopwatch and console.timeEnd() as stopping your stopwatch. Easy right?

I want to merge two Objects with time complexity in mind. Remember, it is not about what works but what works in the shortest time.

EXAMPLE 1:

    const object_1 = {
        id: 3,
        age: 4,
        gender: 'male',
        name: 'John'
    }
    const object_2 = {
        car: "Honda",
        colour: "black",
        year: "2021"
    }
     //Start the timer
    console.time('object_assign')
    const merge_1 = Object.assign(object_1, object_2);
    console.timeEnd('object_assign')
    //end the timer

    //Start the timer
    console.time('rest_operator')
    const merge_2 = {...object_1,...object_1}
    console.timeEnd('rest_operator')
    //end the timer

In the above code, I merged two objects using Object constructor method Object.assign() and Javascript spread operator.

NB: console.time() takes the parameter "label" and the label must be the same name when calling console.timeEnd() to stop the timer and get the time output to the console. If the label name is not the same, it will throw Warning: No such label '{label name}' for console.timeEnd().

Time output on the console:

    object_assign: 0.257ms
    rest_operator: 0.032ms

From the console output, rest/spread operator is faster than Object.assign()

Again, this tutorial is focused on how to use console.time() and console.timeEnd() to make an informed decision and not why rest operators should be used over Object.assign().

EXAMPLE 2:

    const arr =  [1,3,4,5,3]

    //Start timer
    console.time("map")
    arr.map(item => item)
    console.timeEnd('map')
    //End timer

    //Start timer
    console.time("forEach")
    arr.forEach(element=>element)
    console.timeEnd('forEach')
    //End timer

RESPONSE:

    map: 0.188ms
    forEach: 0.035ms

console.time() and console.timeEnd() can also be used as a quick debugging tool to identify bottlenecks in our application.

Check MDN documentation for console.time() and console.timeEnd()

Do you like this article? Hit me up on twitter or linkedin

Validation; joi brings you "Joy" 😁

Olufemi obafunmiso — Fri, 23 Jul 2021 14:36:54 +0000

Ever tried to do some sort of schema validation while building API(s) and you have to write a lot of If else conditions/statements to ensure you throw error when the user inputs wrong data? Yeah, it's stressful and trust me, you still won't cater for all scenarios.
The good news is joi has come to your rescue and it's here to bring you joy [pun intended].
In this tutorial, I will be showing you how to validate with joi.
joi helps define data easily without the need to worry about not throwing error; joi does the job for you by throwing error.

[For this tutorial, I assumed you already know how to setup a server with express.js]

Install all dependencies required for this task npm install joi express

In this tutorial we'll be validating the following details;

username
Password
firstname
lastname
email
phonenumber
date of birth [DOB]
Sex

Let's get right into it 💻💻💻


const Joi = require("joi"); 
app.post("/register", async (req, res) => {

  try {

    // Define Schema

    const schema = Joi.object({
      username: Joi.string().min(6).alphanum().uppercase().required(),
      password:Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/).required(),
      confirm_password:Joi.string().equal(Joi.ref('password')).messages({'any.only': 'password does not match' }).required(),
      firstname: Joi.string().required(),
      lastname: Joi.string(),
      email: Joi.string().email({minDomainSegments: 2}).required(),
      phonenumber: Joi.string().min(6).regex(/^([+])?(\d+)$/).required(),
      dob: Joi.date().max('01-01-2003').iso().messages({'date.format': `Date format is YYYY-MM-DD`,'date.max':`Age must be 18+`}).required(),
      sex: Joi.string().valid('male', 'female','transger', 'others')

    });

    // Validate req.body against the defined schema
    const validation = schema.validate(req.body);
    const { value, error } = validation;

    if (error) {
      const message = error.details.map(x => x.message);

      res.status(400).json({
        status: "error",
        message: "Invalid request data",
        data: message
      });
    } else {
      res.json({
        status: "success",
        message: "Registration successful",
        data: value
      });
    }
  } catch (error) {
    res.json({status:"failed",message:error.message})
  }
});

Joi.object() instantiate a Joi schema object to work with. The schema require Joi.object() to process validation and other Joi features.
I will be explaining the schema constraints and if I have explained some constraints already I won't need to repeat e.g if I have explained .string() I won't be repeating it again in order to keep the article short and simple.

The constraints for username include:

.string() a string.

NOTE: "s" is in lowercase, not uppercase i.e if you use .String() joi will throw this error Joi.String is not a function

min(6) - at least 6 characters long
.max(30) - not more than 30 characters
.alphanum() - contain alphanumeric characters e.g (olufemi78)
.uppercase() - This means when the user input username, joi should convert to uppercase (interesting yeah? 😉)
required() - This means username is required, if user does not pass it, joi will throw error "\"username\" is required"

The constraints for password include:

.regex('^[a-zA-Z0-9]{3,30}$') - This means, it must satisfy the custom regex pattern.

Here's the explanation of the regex pattern

 ^ : Asserts the start of a string

    [a-zA-Z0-9]{3,30} : Matches any character from a-z or 0-9 but the length range must between 3 to 30

    $ : End

You can use regex101 to play with regex. The right pane explains it token by token.

The constraints for confirm_password include:

.equal(Joi.ref('password')) - This means it reference password and it must be equal to password.
messages({ 'any.only': 'password does not match' }) - If password and confirm_password does not match, joi will throw this custom error password does not match . any.only is error type so whenever the error type is any.only I prefer to send custom message and not the typical joi error message. Just make's the error message more descriptive to the user.

The constraints for firstname and lastname:

username name is required while lastname is not required

The constraints for email include:

.email({minDomainSegments: 2}) - It must be a valid email string and must have two domain parts e.g. user.com . One fascinating thing about email validation with joi is that you can decide the top-level domains (TLDs) you want. e.g; you want only .com and .net .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } }) This will only allow .com and .net

The constraints for phonenumber include:

It must be a string with digits in the format based on the regex pattern e.g +248888888888

The constraints for dob include:

Joi.date().max('01-01-2003').iso() - it must be a valid date in ISO 8601 format and it cannot be after Jan 1, 2003. This is super useful if you want to ensure a certain age range can not register on your platform e.g a betting website allow only 18+.
messages({'date.format': Date format is YYYY-MM-DD
'date.max':Age must be 18+})- This means if user enter invalid date format and joi throws error, rather sending back the not too fancy joi error message, send a custom message. Custom messages breakdown:
'date.format': means the error type i.e if joi is throwing error type that is 'date.format', then send this custom message Date format is YYYY-MM-DD to the user. if error type is 'date.max': then send this custom message Age must be 18+ . If there's no custom message for this particular error type (date.max), joi will throw this '"dob" must be less than or equal to "2003-01-01T00:00:00.000Z"'. To aid user experience, I decided to make it easy by sending "Age must be 18+" rather than joi error message. You can literally send any message you pleased. Since it's a custom message, you're fully in control of the message. That's really cool 👌

The constraints for sex include:

.valid('male', 'female','transger') - This means only 4 options are accepted i.e male, female, transgender and others. If user enter any other option aside from the 4, joi will throw this error "\"sex\" must be one of [male, female, transger, others]". This come in handy for analytics. You can easily know the genders that register on your platform. const validation = schema.validate(req.body);

This line of code takes in the data from the body request and validates it against the schema already defined.

        const { value, error } = validation;
        if (error) {
          const message = error.details.map(x => x.message);

          res.status(422).json({
            status: "error",
            message: "Invalid request data",
            data: message
          });

What I did here is to destructure the joi response object after validation and use map() to pick out just the error message and not the whole error object.

Everything is set now. Lets enjoy the thrills and superpower of joi 🔥🔥🔥

EXTRAS:
So far we've seen string, number, email etc validation. What about arrays, Objects, and array of objects? Yeah, I got you.

Array

meta:Joi.array()

The above validates an array.

Object

meta:Joi.object()

The above validates an Object.

Joi.alternatives()

Joi.alternatives() can be used to pass many alternatives like array, object, string etc. For example, in a scenario where you're either expecting an array or object, especially when you depend on an external API and you can't be so sure if the response would be an array or an object.

meta:Joi.alternatives().try(Joi.object(), Joi.array())

Finally, you can go step further to validate the items in the array or object.

Joi.array().items(Joi.string())

Joi.array().items(Joi.object())

Joi is super cool and I would recommend it for server-side validation.

Check Joi docs here

See Project here

Do you like this article? Hit me up on twitter or linkedin

How to Return multiple functions and values while working with REST APIs (Part 2)

Olufemi obafunmiso — Wed, 10 Feb 2021 13:20:38 +0000

In this part 2, we'll be using functions native to Javascript except of course Axios library to make API calls.

Here's the concept of returning multiple values

 const multipleAPI = () => {

    const joke = await axios.get('https://api.chucknorris.io/jokes/random');

    const categories = await axios.get('https://api.chucknorris.io/jokes/categories');

 // This returns the response from joke and categories
    return [joke, categories]
    }
//Call the function
    multipleAPI();

To return multiple values, pass it in an array return [joke, categories]

In this tutorial, we'll be achieving the same result as we did in part 1
but this time without q library functions like .spread() , q.fcall.

We're purely using functions native to Javascript just in case a library is deprecated or a version is deprecated, we won't be stuck 😉

Two functions fetchJokes and callJoke were created. These are just variable names, you can use whatever name you really want.

In the function declaration of fetchJokes all API calls were made and the responses returned accordingly i.e return [joke, categories] in Line 10.

ThefetchJokes function is then invoked in the callJoke function, It's response is destructured in Line 17. You can checkout more on destructing here

Since the categories API returns up to 15 categories, In order to minimize the number of data exposed, I decided to generate a random number between 0-15, as shown on Line 19. The random number generated was then passed as an index to the array response returned from the categories API as shown on Line 26. Please note that this is not compulsory, you can achieve this however you see fit 😉

Line 31 is very important !!!.

This is where callJoke() is called or triggered. If this was not called, the block code Line 16-29 won't run. Also, note callJoke() was called outside the block of code Line 16-29

Now let's run our APP 🚀🚀🚀

On Line 33 I have set up my app to run on port 3000.

I'm using nodemon on my local machine, so I'm running this command; nodemon app.js [You can install nodemon as a dev dependency npm install --save-dev]

Open your Postman or Insomnia or even your browser since it's a GET request

Make a request to : http://localhost:3000/chuck-norris

Voila 🎇

Everything is working!

We've been able to return multiple functions and values while working with REST APIs both with q library in part 1 and native Javascript functions in Part 2.

EXTRAS:
As a developer, you should always have validation in mind and be 100 steps ahead 😂. Imagine if no data is returned when fetchJokes() is called on Line 20 ?. This will cause a code break in Line 25 -26. To mitigate this, just after line 20, before declaring the response variable on Line 21, we can do a check to be sure that the API returned a data response before proceeding, if not throw an error response.

if(!joke.data.value){
        res.json({status:"failed", message:"joke not available"})
        throw new Error('ERROR_RESPONSE_SENT');

      }

      if(!categories.data){
         res.json({status:"failed", message:"categories not available"})
        throw new Error('ERROR_RESPONSE_SENT');
      }

Observe that after returning the error response, I ensured that I explicitly break out of the scope throw new Error('ERROR_RESPONSE_SENT');
The reason is so that the other lines of code do not continue to run after I have returned the response. A Javascript developer MUST keep this in mind. EXPLICITLY break out of scope.

Happy coding 🍻

See Project here

Code review credit : Jimi Ayomide

Do you like this article? Hit me up on Twitter or linkedin

How to Return multiple functions and values while working with REST APIs (Part 1)

Olufemi obafunmiso — Wed, 13 Jan 2021 12:48:02 +0000

As a developer, you interact with REST APIs directly or indirectly, every day at work. This makes it important now more than ever to keep learning and keep improving your REST development skills.

In this part 1 of the series, I will show you how to use the q library function .spread() to specify multiple functions to use as the callbacks and explore the possibilities with this library, while in part 2, we'll not be using the q library. q library is used for creating custom promises and can be quite handy when working with promises.

We'll be exploring how to execute multiple functions at the same time and use .spread() to grab the response from each of the functions. .spread() is a q library function which can be use as a replacement for .then() .

If you have a promise for an array, you can use .spread() as a replacement for .then() The spread function “spreads” the values over the arguments of the fulfillment handler. The rejection handler will get called at the first sign of failure. That is, whichever of
the received promises fails first gets handled by the rejection handler. (Source:https://documentup.com/kriskowal/q/)

Here's the concept of returning multiple values and using .spread()



 return [a,b,c];
        .spread(a,b,c)=>{
        //
        }

This comes in handy when building APIs that query multiple tables and/or calling multiple endpoints.

For the sake of this tutorial and to keep it simple, I'll be making use of chuck-norris API https://api.chucknorris.io/
This is a free JSON API for hand-curated Chuck Norris facts.

The modules used:

Axios : This module makes HTTP request seamless. Check it out here
q : This module is used for creating custom promises. Check it out here
Express: Fast, unopinionated, minimalist web framework for node. Check it out here

The endpoints:
In this tutorial, we'll be making requests to two chuck-norris APIs

Jokes: https://api.chucknorris.io/jokes/random
Categories: https://api.chucknorris.io/jokes/categories

To install all the dependencies required for this task, run npm install q axios express

Let's get our hands dirty 🔥

Line 8 : q.fcall() is q library function and it is used to create a promise.

Line 13: return [joke, categories] stops the execution of the block of code and returns the HTTP request made to chuck-norris API in line 9 and 10.

Line 15: .spread() works like .then() but takes in multiple arguments unlike .then() that takes up to two arguments: callback functions for the success and failure cases of the Promise.

line 17 -18: I decide to filter the API response to what I needed. You can filter the response as you please also.

Line 22-27 : I introduced if statement logic to check if the returned response from the API contains data. This is purely me ensuring that I checked if data field is returned in the response before proceeding.

Line 31 : The reason why I decided to randomize 0-15 is because the categories API returns close to 15-16 categories info which I really don't want to expose all, I preferred to randomly pick one as my response which is what I did in Line 39. Again, this just me doing my thing 😃😃 not really necessary. You can do as you please 😉

Line 34-42: I decided to create and structure my response. 😉

Line 43: Finally send back my response

Line 45-47 : I ensured I catch any error

One thing I didn't mention which might be confusing for a beginner is line 6
I choose the endpoint name as /chuck-norris based on my mood right now 😁 you can choose any name you want.

Now let's run our APP 🚀🚀🚀

On Line 49-52 I have setup my app to run on port 3000.
I'm using nodemon on my local machine so I'm running this command; nodemon app.js [You can install nodemon as a dev dependency npm install --save-dev]

Open your Postman or Insomnia or even your browser since it's a get request
Make a request to this endpoint: http://localhost:3000/chuck-norris

Voila 🎇

Everything is working!

With q library functions , we (me and you 😉) were able to create a promise with q.fcall() where I made two API request to chuck norris APIs and return the response of the two calls in an array and finally used .spread() which is also a q library function that takes in multiple arguments to use as the callbacks.

Happy coding 🍻

See Project here

Do you like this article? Hit me up on Twitter or linkedin