Executable coding blocks production-readiness - PR 6 (#27)

Author: tahachm

questions/describe-event-bubbling/en-US.mdx

@@ -22,11 +22,17 @@ During the bubbling phase, the event starts at the target element and bubbles up
 
 Here's an example using modern ES6 syntax to demonstrate event bubbling:
 
-```js
+```js live
 // HTML:
 // <div id="parent">
 //   <button id="child">Click me!</button>
 // </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
 
 const parent = document.getElementById('parent');
 const child = document.getElementById('child');
@@ -38,6 +44,9 @@ parent.addEventListener('click', () => {
 child.addEventListener('click', () => {
   console.log('Child element clicked');
 });
+
+// Simulate clicking the button:
+child.click();
 ```
 
 When you click the "Click me!" button, both the child and parent event handlers will be triggered due to the event bubbling.
@@ -46,11 +55,32 @@ When you click the "Click me!" button, both the child and parent event handlers
 
 Event bubbling can be stopped during the bubbling phase using the `stopPropagation()` method. If an event handler calls `stopPropagation()`, it prevents the event from further bubbling up the DOM tree, ensuring that only the handlers of the elements up to that point in the hierarchy are executed.
 
-```js
+```js live
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener('click', () => {
+  console.log('Parent element clicked');
+});
+
 child.addEventListener('click', (event) => {
   console.log('Child element clicked');
-  event.stopPropagation();
+  event.stopPropagation(); // Stops propagation to parent
 });
+
+// Simulate clicking the button:
+child.click();
 ```
 
 ## Event delegation

questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx

@@ -100,7 +100,7 @@ The CookieStore API is relatively new and may not be supported in all browsers (
 - **Access**: Data is accessible within all tabs and windows of the same origin.
 - **Security**: All JavaScript on the page have access to values within `localStorage`.
 
-```js live
+```js
 // Set a value in localStorage.
 localStorage.setItem('key', 'value');
 
@@ -123,7 +123,7 @@ localStorage.clear();
 - **Access**: Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different `sessionStorage` objects.
 - **Security**: All JavaScript on the same page have access to values within `sessionStorage` for that page.
 
-```js live
+```js
 // Set a value in sessionStorage.
 sessionStorage.setItem('key', 'value');
 

questions/explain-how-this-works-in-javascript/en-US.mdx

@@ -48,7 +48,7 @@ showThis(); // In non-strict mode: Window (global object). In strict mode: undef
 
 When a function is called as a method of an object, `this` refers to the object that the method is called on.
 
-```js
+```js live
 const obj = {
   name: 'John',
   showThis: function () {
@@ -77,7 +77,7 @@ showThisStandalone(); // In non-strict mode: Window (global object). In strict m
 
 When a function is used as a constructor (called with the `new` keyword), `this` refers to the newly-created instance. In the following example, `this` refers to the `Person` object being created, and the `name` property is set on that object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -90,7 +90,7 @@ console.log(person.name); // "John"
 
 In ES2015 classes, `this` behaves as it does in object methods. It refers to the instance of the class.
 
-```js
+```js live
 class Person {
   constructor(name) {
     this.name = name;
@@ -114,7 +114,7 @@ You can use `bind()`, `call()`, or `apply()` to explicitly set the value of `thi
 
 Using the `call()` and `apply()` methods allow you to explicitly set the value of `this` when calling the function.
 
-```js
+```js live
 function showThis() {
   console.log(this);
 }
@@ -126,7 +126,7 @@ showThis.apply(obj); // { name: 'John' }
 
 The `bind()` method creates a new function with `this` bound to the specified value.
 
-```js
+```js live
 function showThis() {
   console.log(this);
 }
@@ -142,11 +142,11 @@ Arrow functions do not have their own `this` context. Instead, the `this` is lex
 
 In this example, `this` refers to the global object (window or global), because the arrow function is not bound to the `person` object.
 
-```js
+```js live
 const person = {
-  name: 'John',
+  firstName: 'John',
   sayHello: () => {
-    console.log(`Hello, my name is ${this.name}!`);
+    console.log(`Hello, my name is ${this.firstName}!`);
   },
 };
 

questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of a callback function in asynchronous operations
 
 A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -50,7 +50,7 @@ greet('Alice', sayGoodbye);
 
 ### Example of an asynchronous callback
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };

questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx

@@ -8,19 +8,22 @@ Debouncing and throttling are techniques used to control the rate at which a fun
 
 Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
 
-```js
+```js live
 function debounce(func, delay) {
   let timeoutId;
   return function (...args) {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => func.apply(this, args), delay);
   };
 }
+
+const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
+debouncedHello(); // Prints 'Hello world!' after 2 seconds
 ```
 
 Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.
 
-```js
+```js live
 function throttle(func, limit) {
   let inThrottle;
   return function (...args) {
@@ -31,6 +34,17 @@ function throttle(func, limit) {
     }
   };
 }
+
+const handleResize = throttle(() => {
+  // Update element positions
+  console.log('Window resized at', new Date().toLocaleTimeString());
+}, 2000);
+
+// Simulate rapid calls to handleResize every 100ms
+let intervalId = setInterval(() => {
+  handleResize();
+}, 100);
+// 'Window resized' is outputted only every 2 seconds due to throttling
 ```
 
 ---
@@ -77,7 +91,7 @@ Imagine you have a function that updates the position of elements on the screen
 
 #### Code example
 
-```js
+```js live
 function throttle(func, limit) {
   let inThrottle;
   return function (...args) {

questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of error propagation in JavaScript
 
 Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using `try...catch` blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:
 
-```js
+```js live
 function a() {
   throw new Error('An error occurred');
 }
@@ -36,7 +36,7 @@ When an error occurs in a function, it can either be caught and handled within t
 
 To handle errors and prevent them from propagating further, you can use `try...catch` blocks. Here is an example:
 
-```js
+```js live
 function a() {
   throw new Error('An error occurred');
 }
@@ -58,7 +58,7 @@ In this example, the error thrown in function `a` propagates to function `b`, an
 
 Error propagation works differently with asynchronous code, such as promises and `async/await`. For promises, you can use `.catch()` to handle errors:
 
-```js
+```js live
 function a() {
   return Promise.reject(new Error('An error occurred'));
 }
@@ -74,7 +74,7 @@ b().catch((e) => {
 
 For `async/await`, you can use `try...catch` blocks:
 
-```js
+```js live
 async function a() {
   throw new Error('An error occurred');
 }

questions/explain-the-concept-of-partial-application/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of partial application
 
 Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function `add(a, b)`, you can partially apply it to create a new function `add5` that always adds 5 to its argument.
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }

questions/explain-the-concept-of-tagged-templates/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of tagged templates
 
 Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:
 
-```js
+```js live
 function tag(strings, ...values) {
   return strings[0] + values[0] + strings[1] + values[1] + strings[2];
 }
@@ -44,7 +44,7 @@ When a tagged template is invoked, the tag function receives:
 
 For example:
 
-```js
+```js live
 function tag(strings, ...values) {
   console.log(strings); // ["Hello ", "! How are ", "?"]
   console.log(values); // ["world", "you"]
@@ -65,7 +65,7 @@ Tagged templates can be used for various purposes, such as:
 
 Here is a simple example of a tagged template that escapes HTML:
 
-```js
+```js live
 function escapeHTML(strings, ...values) {
   return strings.reduce((result, string, i) => {
     const value = values[i - 1];

questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of the Strategy pattern
 
 The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.
 
-```js
+```js live
 class Context {
   constructor(strategy) {
     this.strategy = strategy;
@@ -20,18 +20,20 @@ class Context {
 class ConcreteStrategyA {
   doAlgorithm(data) {
     // Implementation of algorithm A
+    return 'Algorithm A was run on ' + data;
   }
 }
 
 class ConcreteStrategyB {
   doAlgorithm(data) {
     // Implementation of algorithm B
+    return 'Algorithm B was run on ' + data;
   }
 }
 
 // Usage
 const context = new Context(new ConcreteStrategyA());
-context.executeStrategy(data);
+context.executeStrategy('someData'); // Output: Algorithm A was run on someData
 ```
 
 ---
@@ -52,7 +54,7 @@ The Strategy pattern is a behavioral design pattern that enables selecting an al
 
 Consider a scenario where you have different sorting algorithms and you want to switch between them without changing the client code.
 
-```js
+```js live
 // Strategy interface
 class Strategy {
   doAlgorithm(data) {
@@ -92,10 +94,10 @@ class Context {
 // Usage
 const data = [3, 1, 4, 1, 5, 9];
 const context = new Context(new ConcreteStrategyA());
-console.log(context.executeStrategy(data)); // Output: [1, 1, 3, 4, 5, 9]
+console.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]
 
 context.setStrategy(new ConcreteStrategyB());
-console.log(context.executeStrategy(data)); // Output: [9, 5, 4, 3, 1, 1]
+console.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]
 ```
 
 ### Benefits