DEV Community: Ndimah Tchougoua

You don't need to set the time-out

Ndimah Tchougoua — Sun, 11 Aug 2024 17:20:06 +0000

I know timers has been for a while a feature that a lot of folks use in their day-to-day tasks. In the JavaScript world, timers are often implemented with the setTimeout or setInterval functions, the bad news for you if you are doing it is that it's not a good practice and I will try to explain why.

Before I begin to explain my thought, I have a question for you: can you use a watch giving the wrong time ?

If your answer is yes, I'm sorry to have wasted your precious time because this article does not belong to you.

On the other hand, if your answer is negative, I will explain why using setTimeout or setInterval is like using a damaged watch to get the time.

The problem with these functions

To begin, let's consider the following snippet

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i < 5) {
     console.log("number ", i);
     i += 1;
  }
  console.log("world");

if you run this snippet in your browser console, you will have the following result

This behavior is due to the fact that setTimeout is adding the callback in the browser's queue so that it should process it once it is idle (does not have a task to do) in other words the callback passed to the setTimeout has low priority

Now, knowing this, I imagine that it will be hard for you to implement timers using the setTimeout function because you can have 2 or even 10 ticks (depending on how busy your browser is) at the same time. This will be a nightmare to debug, but do we have a better solution ?

A way to avoid these functions

To provide a better way of implementing timers, we should use requestAnimationFrame function because it tells the browser to execute a callback before the next paint (in other words before any change in the UI occurs)

The difference here is pretty subtle, so it's better to understand it through the code. Let's take back our previous snippet and tweak it a little bit to compare setTimeout and requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i < 5) {
    console.log("number ", i);
    i += 1;
  }
  console.log("world");
}

In this example, we can see that when running on Chrome, the setTimeout runs before requestAnimationFrame (though in some rare cases the inverse happens)

But if you run it on Firefox, this will be the output

This can seem confusing but if you pay a bit of attention, you will realize that no painting is happening during the execution, so how this scenario is handled depends on the browser.

Now if we can tweak our snippet to make the browser repaint the page, let's see what will happen

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i < 5) {
    console.log("number ", i);
    i += 1;
    document.body.style.backgroundColor = "red";
  }
  console.log("world");
}

Here is the output on Chrome

And here is the output in Firefox

As you can see in the logs, when the browser in making changes in the UI, the requestAnimationFrame function will always have priority over other scheduled callbacks.

Because on the web, we are constantly performing repaints, requestAnimationFrame is an obvious choice to implement timers.

Understanding the `requestAnimationFrame` function

The function only takes a callback as parameter. To provide context to the callback, it should take a timestamp indicating the time at which the previous frame has ended based on the time of the initial rendering of the page.

The function will return an integer representing the request's identifier, this can be useful if you wish to cancel the request with the cancelAnimationFrame function.

A simple implementation of a Stopwatch in JavaScript

To implement a stopwatch, there are some requirements:

We should know after which amount of time it should tick (generally a second)
We should know the delay of time after which the stopwatch should stop ticking
The ticking intervals should be lesser than the delay

Taking all these requirements in considerations, the following code snippet will create a stopwatch for you

Outro

I know it might have been a long read but believe that you have enjoyed it. Anyway, if you have any questions or if you have any suggestion, feel free to reach me out.

Thank you for reading it and goodbye 👋

Your website deserves to look good on social medias

Ndimah Tchougoua — Thu, 04 Jul 2024 12:17:05 +0000

I know sometime you might have wondered how websites such as GitHub and Dev do to make their image and description appear when you share their links through social medias on even some messaging applications as illustrated here in WhatsApp.

I have good news for you, it's not that complicated, it's even simple (not kidding I really mean it). All what they do is implementing the opengraph protocol to make it happen so that social medias robots can parse it to get some information in order to render it that way.

So if you are looking for a quick snippet, you can stop here to grab the following

<!DOCTYPE html>
<html lang="en">

<head>
    <! Other infos of the head goes here -->
    <! -- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ike-designo-website.vercel.app/">
    <meta property="og:locale" content="en_US">
    <meta property="og:title" content="Designo a digital agency for your digital needs">
    <meta property="og:description" content="With over 10 years in the industry, we are experienced
        in creating fully responsive websites, app design, and engaging brand experiences.
        Find out more about our services.">
    <meta property="og:image" content="https://ike-designo-website.vercel.app/assets/home-og-image.png">
    <meta property="og:image:width" content="1110">
    <meta property="og:image:height" content="610">
    <meta property="og:image:alt" content="the screen shot of the web page at https://ike-designo-website.vercel.app">
</head>

<body>
    <! the body goes here -->
</body>
</html>

Now, if you get this far, it means that you're looking for a thorough explanation. As you've seen, everything is listed in the head of the page as metadata. So I will try to explain it step by step.

Note: If you have some knowledge about the meta tag you should've noticed that the property attribute is non-standard in the context of HTML. This can be explained by the will to avoid conflicts with the language

og:type

This represents the type of content you are providing, in our case it's a website

og:url

This is the URL of your website, it will be used by the robot as an identifier of your website

og:locale

This property is used to provide information about the primary language of your website (for internationalization purpose)

og:title

The title of the website as it will appear to the potential visitors

og:description

A short description about the page to give an overview of the content (it's important to make at most 2 sentences in order to not confuse your potential visitors)

og:image

a URL representing the image you want to showcase for your website (This can be tricky to choose, but if you don't know what to choose, it is better to take a screenshot of your page)

og:image:alt

A description of what is in the image, this is very important because it will provide information to people who cannot see or are having difficulties to see your image. So I urge you to never forget this one if you want to provide an image

og:image:width, og:image:height

Provide information about the number of pixels wide and high of your image. This information is optional, but it's worth providing it

All these data will produce the following result (this is a site project I've worked on recently)

To sum up, thanks to the opengraph protocol, we can give an overview of our content when we share our link on social medias. So now it's your turn to make your website look good on social medias.

Thank you for reading, and any feedback is appreciated.

Further reading

The opengraph protocol documentation

Brash one-liner to rename files Matching a pattern

Ndimah Tchougoua — Fri, 02 Sep 2022 14:20:33 +0000

One day I found myself in the situation where I needed to rename a series of files by removing a pattern on Each file. Guess what ? They were around 150 PDF files, so no way for me to do it manually.
While searching on the internet, I found the term brash one-liner. It's a kind of long series of bash command combined in order to achieve a goal.
So I had to define mine in order to solve my problem. After a lot of experimentations, I came out with this brash one-liner :

pattern='some-pattern'; find -type f -iname "*$pattern*" | xargs -0 -I{} echo "file=\"{}\"; mv \"\$file\" \"\${file//\"$pattern\"/} " | bash

Looks cryptic? Yeah, you're right, it is a little bit.
So let me explain my approach to solve this problem.
My approach to solve it uses 4 steps:

Pattern Definition
Files Searching
Text-Based bash command definition
Command Execution

Pattern Definition

   pattern='some-pattern';

here I just keep my pattern in a variable to avoid repeating myself (I'm a DRY guy)
Note: I use the single quotes here because my pattern don't need to be evaluated before execution by the shell

Files Searching

  find -type f -iname "*$pattern*"

Here I search for all files matching my pattern, ignoring the case with the help of the find command
Note: we have to ensure ourselves that the pattern only matches the files we are looking to rename, otherwise it's going to rename the unexpected files. Please try to run this separately first to verify it.

Text-Based bash command definition

   xargs -0 -I{} echo "file=\"{}\"; mv \"\$file\" \"\${file//\"$pattern\"/} "

This is where the magic operate, so we have to use a little trick to define the new name of each file.
Here, my approach is to use shell expansion.
I've chosen to use the xargs command because it will execute the same command for each file found.
The -0 argument here is to end each entry with the null character.
The -I{} is to tell xargs to replace all occurrences of {} in the command with the entry.
Inside my text-based command, I define a so that I will substitute all occurrences of $pattern with a blank character.
I've used the escape character to avoid the file variable to be evaluated before execution.
Note: I could've used the sed command, but I wanted to reduce typing. By the way, this is the place where we can build any complex command, so it's up to your imagination.

Command Execution

   bash

Here is where the bash come to the game and execute the text-based bash command that it receives.

At the end of the day, I hope that this little tutorial will help you if you face this type of problem. Feel free to send me any suggestion or improvement in the discussion, thank you for your attention.