DEV Community: Muhammad Sultan Al Mahfuz

ES5

Muhammad Sultan Al Mahfuz — Sun, 20 Oct 2024 15:25:48 +0000

Yes, here's a summary of ES5-compatible solutions for handling tasks sequentially with callbacks, including the four options I mentioned earlier:

1. Recursion with Callbacks

Description: The most common and simplest solution. Tasks are executed one after the other using recursion. Each task calls the next task upon completion.
Benefit: Easy to read and understand.

#### Example:

   var performTasks = function (tasks) {
     var executeTask = function (index) {
       if (index >= tasks.length) return;
       tasks[index](function () {
         executeTask(index + 1); // Recursively call the next task
       });
     };
     executeTask(0); // Start with the first task
   };

2. Loop with Callbacks (while or for loop)

Description: Another solution where tasks are executed sequentially using a loop, such as a while or for loop. However, due to the asynchronous nature of JavaScript, the loop is controlled manually to wait for the callback before advancing to the next task.
Benefit: Mimics looping behavior without recursion.

#### Example (with while):

   var performTasks = function (tasks) {
     if (tasks instanceof Array) {
       var index = 0;

       var next = function () {
         while (index < tasks.length) {
           tasks[index++](next); // Execute the task and pass `next` as the callback
           break; // Prevent immediate loop continuation; wait for callback
         }
       };

       next(); // Start the "loop"
     }
   };

3. Using `setTimeout()`

Description: Ensures that the execution remains non-blocking by using setTimeout() to introduce a slight delay between tasks. Each task is executed after a brief timeout, giving a feel of asynchronous execution.
Benefit: Simple, non-blocking approach to task execution.

#### Example:

   var performTasks = function (tasks) {
     var executeTask = function (index) {
       if (index >= tasks.length) return;
       setTimeout(function () {
         tasks[index](function () {
           executeTask(index + 1); // Call the next task
         });
       }, 0);
     };
     executeTask(0); // Start executing tasks
   };

4. Single Task Execution with Callback

Description: A minimal solution designed to execute a single task with a callback. If more than one task is passed, this function handles them as an array, but if only one task is passed, it runs just that task.
Benefit: Simple, lightweight for cases when you just need to run a single task.

#### Example:

   var performTask = function (task) {
     if (typeof task === 'function') {
       task(function () {
         console.log('Task completed');
       });
     }
   };

   // Example usage:
   performTask(function (done) {
     console.log('Running task...');
     setTimeout(done, 1000); // Task completed after 1 second
   });

Summary:

Recursion with Callbacks: The most readable and widely-used solution for sequential task execution in ES5.
Loop with Callbacks: Another common approach using loops like while or for. More manual control over task execution.
Using setTimeout(): Ensures non-blocking execution, useful in situations where tasks should run without blocking the main thread.
Single Task Execution: A basic solution for executing a single task. It's minimal and useful when the number of tasks is small.

All these approaches are ES5-compatible and work well for handling asynchronous tasks in older JavaScript environments.

In addition to the four solutions mentioned earlier, there are a few more ES5-compatible techniques for handling tasks sequentially. Here are a couple of additional approaches:

5. Chained Callbacks

Description: A manual, straightforward method where each task calls the next task directly from within its callback. This is often referred to as "callback hell" due to the deeply nested structure, but it's still a valid option for handling sequential tasks.
Benefit: Simple and easy to understand for a small number of tasks.

#### Example:

   var task1 = function (callback) {
     console.log("Task 1 executed");
     setTimeout(callback, 1000); // Call the next task after 1 second
   };

   var task2 = function (callback) {
     console.log("Task 2 executed");
     setTimeout(callback, 1000);
   };

   var task3 = function (callback) {
     console.log("Task 3 executed");
     setTimeout(callback, 1000);
   };

   // Chain the tasks manually
   task1(function () {
     task2(function () {
       task3(function () {
         console.log("All tasks completed");
       });
     });
   });

6. Task Queue

Description: Implementing a task queue is a more advanced option where tasks are pushed into a queue and executed sequentially. This can be useful when you have many tasks and want more control over when they are executed (e.g., pausing or restarting the queue).
Benefit: Adds more control and flexibility over task execution and can easily handle adding new tasks dynamically.

#### Example:

   var TaskQueue = function () {
     this.queue = [];
     this.running = false;
   };

   TaskQueue.prototype.addTask = function (task) {
     this.queue.push(task);
   };

   TaskQueue.prototype.run = function () {
     if (this.running || this.queue.length === 0) return;
     this.running = true;

     var self = this;

     var nextTask = function () {
       if (self.queue.length === 0) {
         self.running = false;
         console.log("All tasks completed");
         return;
       }

       var task = self.queue.shift(); // Get the next task
       task(nextTask); // Execute the task and pass the nextTask as the callback
     };

     nextTask(); // Start running tasks
   };

   // Create a task queue
   var queue = new TaskQueue();

   // Add tasks
   queue.addTask(function (callback) {
     console.log("Task 1");
     setTimeout(callback, 1000);
   });

   queue.addTask(function (callback) {
     console.log("Task 2");
     setTimeout(callback, 1000);
   });

   queue.addTask(function (callback) {
     console.log("Task 3");
     setTimeout(callback, 1000);
   });

   // Run the tasks in the queue
   queue.run();

7. Callback Stacking with `apply()` or `call()`

Description: This technique is a bit more advanced and involves using JavaScript's apply() or call() methods to maintain the context of callbacks and dynamically execute tasks. It essentially uses a stack to manage the execution flow.
Benefit: Offers flexibility in how you handle arguments and execution contexts for each task.

#### Example:

   var performTasks = function () {
     var tasks = Array.prototype.slice.call(arguments); // Convert arguments to an array

     var next = function () {
       if (tasks.length === 0) {
         console.log("All tasks completed");
         return;
       }
       var task = tasks.shift(); // Get the next task
       task(next); // Call the task and pass `next` as the callback
     };

     next(); // Start the task execution
   };

   var task1 = function (callback) {
     console.log("Task 1");
     setTimeout(callback, 1000);
   };

   var task2 = function (callback) {
     console.log("Task 2");
     setTimeout(callback, 1000);
   };

   var task3 = function (callback) {
     console.log("Task 3");
     setTimeout(callback, 1000);
   };

   // Execute tasks using `performTasks`
   performTasks(task1, task2, task3);

Additional ES5-Compatible Techniques Summary:

Chained Callbacks: A manual and simple method for executing tasks in sequence, but can lead to deeply nested callbacks.
Task Queue: Allows for more dynamic control over task execution, such as pausing or restarting the queue, and handling a larger number of tasks.
Callback Stacking with apply() or call(): Uses more advanced features of JavaScript to manage context and task execution flow dynamically.

Each of these methods adds a different level of flexibility and control over task execution while maintaining compatibility with ES5.

var performTasks = function (tasks) {
var index = 0; // Initialize index to track current task

var executeNext = function () {
if (index >= tasks.length) {
console.log("All tasks completed");
return;
}

// Execute the current task
tasks[index](function () {
  index++; // Move to the next task
  executeNext(); // Execute the next task
});

};

executeNext(); // Start executing tasks
};

// Define tasks
var task1 = function (callback) {
console.log("Task 1 executed");
setTimeout(callback, 1000); // Simulate asynchronous work
};

var task2 = function (callback) {
console.log("Task 2 executed");
setTimeout(callback, 1000);
};

var task3 = function (callback) {
console.log("Task 3 executed");
setTimeout(callback, 1000);
};

// Execute tasks
performTasks([task1, task2, task3]);

Here are some more ES5-compatible techniques for handling sequential task execution, complete with code examples:

8. Using a Simple Counter with a Loop

This approach uses a simple loop with a counter variable to control the execution of tasks. It allows sequential execution without deep nesting.

var performTasks = function (tasks) {
  var index = 0; // Initialize index to track current task

  var executeNext = function () {
    if (index >= tasks.length) {
      console.log("All tasks completed");
      return;
    }

    // Execute the current task
    tasks[index](function () {
      index++; // Move to the next task
      executeNext(); // Execute the next task
    });
  };

  executeNext(); // Start executing tasks
};

// Define tasks
var task1 = function (callback) {
  console.log("Task 1 executed");
  setTimeout(callback, 1000); // Simulate asynchronous work
};

var task2 = function (callback) {
  console.log("Task 2 executed");
  setTimeout(callback, 1000);
};

var task3 = function (callback) {
  console.log("Task 3 executed");
  setTimeout(callback, 1000);
};

// Execute tasks
performTasks([task1, task2, task3]);

9. Using a Self-Invoking Function

This approach utilizes a self-invoking function to encapsulate the execution logic, keeping the variables scoped within it.

var performTasks = (function () {
  return function (tasks) {
    var index = 0;

    var executeNext = function () {
      if (index >= tasks.length) {
        console.log("All tasks completed");
        return;
      }

      tasks[index](function () {
        index++;
        executeNext();
      });
    };

    executeNext();
  };
})();

// Define tasks
var task1 = function (callback) {
  console.log("Task 1 executed");
  setTimeout(callback, 1000);
};

var task2 = function (callback) {
  console.log("Task 2 executed");
  setTimeout(callback, 1000);
};

var task3 = function (callback) {
  console.log("Task 3 executed");
  setTimeout(callback, 1000);
};

// Execute tasks
performTasks([task1, task2, task3]);

10. Using Array.prototype.reduce()

You can leverage the reduce method to execute tasks sequentially by accumulating the callback chain.

var performTasks = function (tasks) {
  // Start the chain with a resolved function
  tasks.reduce(function (previousPromise, task) {
    return previousPromise.then(function () {
      return new Promise(function (resolve) {
        task(resolve); // Pass resolve to the task
      });
    });
  }, Promise.resolve());
};

// Define tasks
var task1 = function (callback) {
  console.log("Task 1 executed");
  setTimeout(callback, 1000);
};

var task2 = function (callback) {
  console.log("Task 2 executed");
  setTimeout(callback, 1000);
};

var task3 = function (callback) {
  console.log("Task 3 executed");
  setTimeout(callback, 1000);
};

// Execute tasks
performTasks([task1, task2, task3]);

11. Event Emitter Pattern

You can create a simple event emitter pattern to handle task execution, allowing tasks to listen for completion events.

var EventEmitter = function () {
  this.events = {};
};

EventEmitter.prototype.on = function (event, listener) {
  if (!this.events[event]) {
    this.events[event] = [];
  }
  this.events[event].push(listener);
};

EventEmitter.prototype.emit = function (event) {
  if (this.events[event]) {
    this.events[event].forEach(function (listener) {
      listener();
    });
  }
};

// Task executor
var TaskExecutor = function () {
  this.eventEmitter = new EventEmitter();
};

TaskExecutor.prototype.execute = function (tasks) {
  var index = 0;

  var next = function () {
    if (index < tasks.length) {
      tasks[index](next);
      index++;
    } else {
      this.eventEmitter.emit('completed');
    }
  }.bind(this);

  next();
};

// Usage
var executor = new TaskExecutor();

// Define tasks
var task1 = function (callback) {
  console.log("Task 1 executed");
  setTimeout(callback, 1000);
};

var task2 = function (callback) {
  console.log("Task 2 executed");
  setTimeout(callback, 1000);
};

var task3 = function (callback) {
  console.log("Task 3 executed");
  setTimeout(callback, 1000);
};

// Listen for completion
executor.eventEmitter.on('completed', function () {
  console.log("All tasks completed");
});

// Execute tasks
executor.execute([task1, task2, task3]);

These examples provide additional methods for handling sequential task execution while being compatible with ES5. Each method has its own advantages and is suitable for different scenarios.

Semantic Elements in HTML5 for Layout Designing: Replace the Div Element with the Side Effect of CSS Default Style

Muhammad Sultan Al Mahfuz — Tue, 08 Oct 2024 12:55:13 +0000

You may know that we should use semantic elements for layout design because of its extra benefits, including accessibility and making more SEO friendly. But now I am going to share an interesting experience.

Once I was coding and shocked to see that the h1 element rendered in the webpage with a slight difference where I used HTML5 semantic elements for layout designing instead of the div elements. I thought there is no difference in default CSS style between div and semantic element in HTML5, such as header, main, footer, section, article, aside, nav. But I noticed that the default CSS style of the font-size property value changed or was showing different while h1 element is the child element of a semantic element like section, article, aside, nav. Here is the summary of my experiment where showed the default font-size value of h1 to h6 where those are used as child element in body, div or semantic elements that are used for layout designing:

Parent Element / Child Element	h1	h2	h3	h4	h5	h6
body	32px	24px	18.72px	16px	13.28px	10.72px
div	32px	24px	18.72px	16px	13.28px	10.72px
header	32px	24px	18.72px	16px	13.28px	10.72px
main	32px	24px	18.72px	16px	13.28px	10.72px
footer	32px	24px	18.72px	16px	13.28px	10.72px
section	24px	24px	18.72px	16px	13.28px	10.72px
article	24px	24px	18.72px	16px	13.28px	10.72px
aside	24px	24px	18.72px	16px	13.28px	10.72px
nav	24px	24px	18.72px	16px	13.28px	10.72px

So, according to the result, the summary is there is no side effect on default CSS while h1 is the child element of body, div, header, main or footer but different for section, article, aside, nav whose are generally used as child element of header, main and footer.

Here is my experiment code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Font Sizes by Elements (h1 to h6)</title>
    <style>
        div, body>h1, body>h2, body>h3, body>h4, body>h5, body>h6 {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <div>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </div>

    <header>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </header>

    <main>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </main>

    <footer>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </footer>

    <section>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </section>

    <article>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </article>

    <aside>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </aside>

    <nav>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </nav>

    <br>
    <p>
        <strong>Note: </strong> <span style="color: blue;">Blue</span> coloured h1 to h6 elements are used as child elements of a non-semantic element.
    </p>

    <!-- Javascript coded for getting font size dynamically. -->
    <script>
        // Array of tag names
        const tagNames = [
            'body', 'div', 'header', 'main', 'footer', 'section', 'article', 'aside', 'nav'
        ]

        // Iterate through the tagNames and repace innerText of all headings (inner elements) with parent element name and font size
        tagNames.forEach(tagName => {
            // Get each element (parent element) from tagNames
            const element = document.getElementsByTagName(tagName)[0]

            // Get h1Element to h6Element
            const h1Element = element.getElementsByTagName('h1')[0]
            const h2Element = element.getElementsByTagName('h2')[0]
            const h3Element = element.getElementsByTagName('h3')[0]
            const h4Element = element.getElementsByTagName('h4')[0]
            const h5Element = element.getElementsByTagName('h5')[0]
            const h6Element = element.getElementsByTagName('h6')[0]

            // Init fontSize
            let fontSize;

            // For h1
            fontSize = window.getComputedStyle(h1Element, null).getPropertyValue('font-size')
            h1Element.innerText = `<${tagName}> : Heading 1 [${fontSize}]`

            // For h2
            fontSize = window.getComputedStyle(h2Element, null).getPropertyValue('font-size')
            h2Element.innerText = `<${tagName}> : Heading 2 [${fontSize}]`

            // For h3
            fontSize = window.getComputedStyle(h3Element, null).getPropertyValue('font-size')
            h3Element.innerText = `<${tagName}> : Heading 3 [${fontSize}]`

            // For h4
            fontSize = window.getComputedStyle(h4Element, null).getPropertyValue('font-size')
            h4Element.innerText = `<${tagName}> : Heading 4 [${fontSize}]`

            // For h5
            fontSize = window.getComputedStyle(h5Element, null).getPropertyValue('font-size')
            h5Element.innerText = `<${tagName}> : Heading 5 [${fontSize}]`

            // For h6
            fontSize = window.getComputedStyle(h6Element, null).getPropertyValue('font-size')
            h6Element.innerText = `<${tagName}> : Heading 6 [${fontSize}]`
        })
    </script>
</body>
</html>

Why it do? Comment the reason if it is known to you?

DEV Community: Muhammad Sultan Al Mahfuz

ES5

1. Recursion with Callbacks

2. Loop with Callbacks (while or for loop)

3. Using setTimeout()

4. Single Task Execution with Callback

Summary:

5. Chained Callbacks

6. Task Queue

7. Callback Stacking with apply() or call()

Additional ES5-Compatible Techniques Summary:

8. Using a Simple Counter with a Loop

9. Using a Self-Invoking Function

10. Using Array.prototype.reduce()

11. Event Emitter Pattern

Semantic Elements in HTML5 for Layout Designing: Replace the Div Element with the Side Effect of CSS Default Style

3. Using `setTimeout()`

7. Callback Stacking with `apply()` or `call()`