Don't use magic strings!

Josue Jaramillo — Wed, 03 May 2023 22:24:32 +0000

Hi everyone, this is something I recently learned and I would like to share with everyone. It is something small but at the same time it becomes a good practice that can greatly improve our code.

Magic Strings

We can define this as using hardcoded code that contains a specific string, either to handle a state, compare a value, or store a value that we, for whatever reason, need to have hardcoded.

For example:

if(this.userStatus === 'online'){
  //any
}

The problem

If you need to check this status in multiple parts of your code by any reason, someone can easily make a typo error and write something like:

if(this.userStatus === 'onlien'){
  //any
}

and the code won't work as expected.

Solution

The most obvious solutions should be to create a constant and use this constant when necessary, but what if we have a lot of constants related to that specific functionality? We should create an object with all possible words.... A Dictionary.

export const USER_STATUS = {
  online: 'online',
  offline: 'offline',
  connecting: 'connecting'
}

export default class Example {
  checkStatus() {
    if(this.userStatus === USER_STATUS.online){
      //any
    }
  }
}

Mutability

We still have a problem here, even if it's a constant, we could edit the content of our object and overwrite the value by mistake.

USER_STATUS.online = 'hi'

To avoid this we can improve the code making it immutable.

Immutability

Freezing an object prevents extensions and makes existing properties non-writable and non-configurable.

export const USER_STATUS = Object.freeze({
  online: "online",
  offline: "offline",
  connecting: "connecting"
});

Point of improvement

At this point our dictionary is ready, however there are cases where we use these values only internally in our application, i.e. we don't need any specific text, it can be a number or anything.

In these cases we could use symbol and avoid the fatigue of adding different strings or numbers for each part of our dictionary. Symbol will always make sure to assign a different value.

export const USER_STATUS = Object.freeze({
  online: Symbol(),
  offline: Symbol(),
  connecting: Symbol()
});

And that's all, thanks for reading and I hope this helps you organize your code better.

You can also see an small example here:
https://codesandbox.io/s/runtime-dust-zbkfth

Bye bye!

Simple Vanilla One-Time Password (OTP) module from scratch.

Josue Jaramillo — Thu, 27 Apr 2023 03:17:05 +0000

Hello people! As you can see in the title, this post is a guide about how to develop an OTP module. Why? Because it sounds easy but there are some things that we need to take into account when developing.

Initial HTML

To begin we will put together the basic structure of this, we will add our section, a title, a descriptive message and obviously our form with a single input to enter the code. Nothing difficult right? It should work.

<section class="auth-block container" aria-labelledby="auth-block-title-id">
      <h1 id="auth-block-title-id" class="auth-block__title">
        Enter your authentication code
      </h1>
      <p>
        We sent a message to your phone. Please add the code and click on
        continue
      </p>
      <form action="/check-code">
        <label for="auth-block-single-input-id">OTP Code:</label>
        <input id="auth-block-single-input-id" />
        <button type="reset">Clear</button>
        <button type="submit">Continue</button>
      </form>
    </section>

And it works!

But... it can't be that simple, right? Well, no. There are certain things we need to consider when making an OTP input.

First of all these codes are usually numeric, so we should validate this. And as you can imagine, the easiest way would be to update the input to a type="number" input. But this will add some controls that don't make much sense when entering a code, I don't think someone will use the arrows until they get to their 6 digit number.

To avoid this, we will use a text input, but we will validate the type of text we expect, in this case, it is numeric. To do this we will take advantage of the pattern and add a simple regular expression.

pattern="[0-9]{6}"

But is it enough? Thanks to our pattern we can validate the length and prevent form submission, but from my point of view it would be better if the user can't enter letters, only numbers. So we'll add some JavaScript code :)

handleInput(e) {
    const { target } = e;
    target.value = target.value.replace(/[^0-9]/g, "");
  }

This code takes advantage of a regular expression to replace anything that is not number with empty "". In this way, when the user tries to write text instead of numbers, it will be impossible.

Mobile

At this point we might think that we are done, if we try it on our computer it seems that everything is correct, but what if we try it on our phone? Don't you find it annoying that the full keyboard opens to enter numbers? We should only open the numeric keyboard. And we do that by adding an inputmode="numeric" to our input.

Why always iOS?

If you already have some experience developing sites and you care that they look good on all devices and browsers, you will know that on many occasions you have to make small changes for iOS. And this is not the exception LOL.

If you pay attention to the previous image, you will see a blank space right in the middle, this is where iOS has a cool feature that means that when you receive a message with an OTP code, it shows it directly as an autocomplete, so you don't you have to go to the messages app, copy the message, come back and paste it.

To achieve this we just need to add autocomplete="one-time-code" to the input.

And voila, we could continue adding styles, improving accessibility, make it required, etc.

But that will be for another post in which I'll explain how to make a more advanced OTP module like the one used by Epic Games and a lot of sites that has multiple inputs, one per number. However for now this code complies with the basic functionality that an input for OTP should have.

You can see the complete code example in the following link:

https://codesandbox.io/s/boring-neumann-0z3rki

Thanks for reading!

DEV Community: Josue Jaramillo