DEV Community: Latz

NodeJS: async.queue does not display error messages by default

Latz — Wed, 26 Feb 2025 14:27:01 +0000

Currently, I’m creating a custom web crawler and the easiest method to implement concurrency is to use the npm package “async“.

While coding, I came across the problem, that the program wasn’t working correctly, but the terminal didn’t display any errors.

So I tested the queued function outside of async, and it threw an error as expected. What was happening here?

It turned out that async.queue is catching errors by default and that you have to handle them explicitly. This can be done by adding an error callback to the queue:

var q = async.queue(function(task, callback) {
    console.log('hello ' + task.name);
    callback();
}, 2);

q.error(function(err, task) {
    console.error('task experienced an error');
});

Currently, this not very helpful but of course you can display the error easily:

q.error(function(err, task) {
    console.error(`Async error: ${err}`);
});

There we have it:

Async error: ReferenceError: xxx is not defined

JavaScript – Rounding floating point numbers

Latz — Wed, 22 May 2024 18:10:48 +0000

There are six different functions in JavaScript’s Math library for rounding floating point numbers:

abs()
ceil()
floor()
round()
trunc()
fround()

What is the difference between these functions?

abs()

abs() is the absolute value of a number. Mathematically speaking, it is the distance of a number from zero. As a distance cannot be negative, the absolute value is always the positive value of a number:

Math.abs(7.89012) = 7.89012
Math.abs(-7.89012) = 7.89012

ceil()

ceil() rounds up a number to the nearest integer value greater than or equal to the given number:

Math.ceil(7.1) = 8
Math.ceil(7.8) = 8
Math.ceil(-7.1) = -7
Math.ceil(-7.8) = -7

Please note that the next largest integer from -7.1 is not -8, but -7.

floor()

floor() is the counterpart to ceil(), so it rounds the given number to the next smaller or equal number to the given number:

Math.floor(7.1) = 7
Math.floor(7.8) = 7
Math.floor(-7.1) = -8
Math.floor(-7.8) = -8

round()

round() rounds the given number to the nearest whole number:

Math.round(7.1) = 7
Math.round(7.8) = 8
Math.round(-7.1) = -7
Math.round(-7.8) = -8

The function works mathematically correctly:

math.round(7.49) = 7
math.round(7.5) = 8

trunc()

Math.trunc(7.1) = 7
Math.trunc(7.8) = 7
Math.trunc(-7.1) = -7
Math.trunc(-7.8) = -7

fround()
This function is only required in special situations where you have to work with 32-bit numbers, e.g. in graphics or audio programming. It enables more precise rounding than the more general round().
Here is a more detailed explanation than is useful in this article.

(Foto von Mika Baumeister auf Unsplash)

How to loop through an array with a variable starting element

Latz — Tue, 17 Oct 2023 11:21:41 +0000

Recently I was faced with an interesting problem. I needed to create a simplified (pseudo-) cron interface:

The task is to find the next selected day.

My first attempt was a naive one. Loop to the end of the array and if nothing was found, start a second loop at the beginning and move to the current day (pseudocode, no error detection, performance optimization or edge casing):

$days = Array(false, true, false, true, false, false, false);
$today = 4 // Thursday
$i = today + 1;  // loop index starts at the next day (Friday)
$next = -1;      // loop abort variable
// iterate to the end of the array
while ($i <= $today.length() && $next == -1) {
    if ($days[i] == true) { // day checkbox is selected
      $next = $days[$i];
    }
    $i++;                        
}
// no truthy element was found
if ($next == -1) {
    $i = 0; // start at the beginninf of the array
    // iterate from the start to the current day
    while ($i <= $today && $next == -1) {
        if ($days[i] == true) { // day checkbox is selected
          $next = $i;
        }
        $i++;  
    }
}
print $next; // 1 (Monday)

The problem can be abstracted: Printing all the indices of an array in sequence, using a variable starting point. In the example above: 5, 6, 0, 1, 2, 3, 4.

$start = 4;
$arr = Array(false, true, false, false, true, false, false);
$max = $arr.length;
$i = $start + 1 ;
while ($i < $max) {    
   print ($i);   // 5, 6
   $i++;
}
$i = 0;
while ($i < $start + 1) {
    print ($i);  // 0, 1, 2, 3, 4
    $i++;
}

If you look at the output, you’ll notice that the numbers are all integers and less than or equal to max.
There’s a special, lesser-known operator that comes in handy in this case: modulo. In a nutshell, modulo returns the integer remainder of a division, e.g:

1 mod 5 → 1 (0 remaining 1)
2 mod 5 → 2 (0 remaining 2)
3 mod 5 → 3 (0 remaining 3)
4 mod 5 → 4 (0 remaining 4)
5 mod 5 → 0 (1 remaining 0)
6 mod 5 → 1 (1 remaining 1)
7 mod 5 → 2 (1 remaining 2)

You will notice two things:

the result is always less than or equal to the dividend (5)
the result is repeated after the dividend (1, 2, 3, 4, 5, 6, 7) exceeds the value of the divisor (5).

That’s exactly what we need. Let’s put something like this, with different numbers, into code:

$start = 4;
$max = 7;
$i = $start;
while ($i < $max + $start) {
    print ($i); // 4, 5, 6, 7, 8, 9, 10
    print ($i mod $max); // 4, 5, 6, 0, 1, 2, 3
    $i++;
}

The index i exceeds the length of the array, but we’re using i mod max and not the loop index itself. The result makes a round trip after reaching max and starts again at 0. All indexes of the array are covered, starting from the middle index 4.

The actual code now looks like this:

$days = Array(false, true, false, true, false, false, false);
$today = 4 // THursday

$i = $today + 1;
$max = $days.length;
$next = -1;
while ($i < $max + $today && $next == -1) {
    if ($days[$i mod $max] == true) {
        $next = i mod $max;
    }
    $i++;
}

print ($next); // 1 (Monday)

This code may not look as readable as before, so why are we doing this?

Because we can!

And it’s fun to come up with a clever solution to a problem. We’re programmers, after all.

The modern way of checking radio groups

Latz — Fri, 06 Oct 2023 21:34:32 +0000

Checking radio groups in JavaScript has always been a bit tricky because you can only check if a particular radio button is selected, not the whole group at once.

<input type="radio" name="fruits" id="banana" checked="checked" />Banana
<input type="radio" name="fruits" id="apple" />Apple
<input type="radio" name="fruits" id="cherry" />Cherry

Wow, that looks archaic. There must be a better way using the new ES6 features, and there is! As of ES2015, NodeList contains a forEach method(). This makes things much easier:

var fruits = document.getElementsByName('fruits');
let selectedFruit = '';
fruits.forEach((fruit) => {
  if (fruit.checked) {
    selectedFruit = fruit.id;
  }
});

Still a lot of lines. We can make the code much tighter, but also much more unreadable:

[…document.getElementsByName('fruits')].some(
  (fruit) => (let selectedFruit = fruit.id) && fruit.checked
);

This requires a bit of explanation, because in order to achieve it we have to dig deep into our bag of tricks.

First we convert the NodeList to an array using the spread operator to have all the funky Array() methods available.
The Array() method we use is some(). This method loops over an array until the callback function returns true. In our case we exit the loop by checking for “fruit.checked” which is true if the radio button is checked.

The second trick is to include the assignment of the loop variable fruit to the upper scope variable selectedFruit. This assignment always returns true, and therefore does not affect the result of the whole statement when it’s linked with && operator to the other comparison.

BTW, we don’t need to declare an upper scope variable any more here because we don’t enter a new scope in the callback function. New scopes require curly braces which we don’t need here because the callback function only contains a single statement.
You can be picky and point our that selectedFruit is undeclared, but the code works nevertheless. So what?

Conclusion
We reduced the code from six lines to three and from 193 to 115 characters. Not bad and your code will look much cooler on GitHub!

Chrome side panel: Simulate close event

Latz — Thu, 14 Sep 2023 13:30:18 +0000

The new side panel in Chrome does not contain a close event, which could come handy if you want to clean up stuff after the panel has been closed.

You can simulate the event by opening a permanent connection between the side panel and the background script. This connection fires an onDisconnect event if the side panel gets closed.

sidepanel.js:

chrome.runtime.connect({ name: 'mySidepanel' });

The background script can add a listener and react accordingly:

background.js:

chrome.runtime.onConnect.addListener((port) => {
  if (port.name === 'mySidepanel') {
    port.onDisconnect.addListener(() => {
      console.log('Sidepanel closed.');
    });
  }
});

Note that switching between panels is not sufficient, the event will only fire if the side panel is fully closed.

Chrome extensions, Manifest v3 and local storage views

Latz — Thu, 09 Mar 2023 15:05:21 +0000

The other day I started coding a Chrome extension that makes heavy use of Chrome's IndexedDB. Until this time then I had no problem inpecting any local storage using the DevTool's "Application" tab. Those were extensions that used Manifest v2 but as of June 2023 Google will only acept Manifest v3 extensions.
One of the main changes is that background pages are replaced with service workers. So I changed my code accordingly from:

"background": {
    "page": "background/background.html"
  },

"background": {
    "service_worker": "background.js",
  }

and coded happily on. When I reached the local storage part and wanted to check the local storage by clicking on the new "service worker" link:

Surprisingly the IndexedDB pane in the "Application" tab was empty though I definitely knew that there was data stored:

o what was happening? After a long search on the Internets I came across an answer on StackOverflow that saved my day.

If your extension contains a popup you can right click and select "Inspect" to open the correct DevTools window:

And there you go:

But what do you do if your extension does not containa popup? There is a solution though it's a bit more complicated.
Open the extension page and look for the extension's ID:

Copy that ID and enter the following URL into the address bar, replacing "ID" with the actual ID:

chrome-extension://ID/manifest.json

Right click on the window and select "Inspect":

One last problem: In contrast to the "classical" DevTools popup this one disappears if you reload the extension. Fortunately you can bookmark the tab:

Update: You don't actullay need to insert the ID manually but you can click on any script in your default Devtools window (opened with "Inspect views service worker" link), right click on any script in the "Sources" pane, select "Open in new tab" and, just like above, right click the tab and select "Inspect":

The only question that remains is: Why, Google, why has this be so complicated?

How-to split a number into equal chunks

Latz — Wed, 17 Aug 2022 21:31:14 +0000

The other day I had to iterate over a large number of items but to avoid a timeout I could only compute a certain amount at a time. So I had to split the number into equal chunks and a remainder. Here’s an easy way to determine the chunk size:
$totalNumber = 50321; $chunkSize = 1023; $remainder = $totalNumber % $chunkSize; $chunks = ($totalNumber - $remainder) / $chunkSize;

The code return the following values:
$remainder => 194
$chunks => 49
Verification: (49 * 1023) + 194 = 50321

How does it work?
In line 5 $totalNumber is divided by a modulo operator (“%” is the PHP token for modulo). The operator returns the remainder of the division (194). By subtracting this value from $totalNumber it becomes a whole number multiple of $chunks and the division with $chunkSize equals the desired number of $chunks (line 6).
Now you have the number of necessary iterations and the remaining part.

Firefox Addon: Add options menu to browser action icon

Latz — Thu, 20 May 2021 13:49:06 +0000

Especially during development it’s annoying to reach the option page of a Firefox addon:

Hamburger
Addons and Themes
...
Options

There should be a faster way. At least for your own Add-ons you can quite easily add an “Options” menu item to the browser action:

browser.contextMenus.create({
    title: 'Options',
    contexts: ['browser_action'],
    onclick: () => {
      browser.runtime.openOptionsPage();
    },
  });

Additionally to have to add a new permission to the manifest.json file:

"permissions": ["contextMenus"],

That was easy!

Set selections in a multiple select element with ES6

Latz — Mon, 01 Mar 2021 15:07:09 +0000

If you're looking on the web for a solution to programmatically set the selections of a multiple select element in JavaScript you most likely find answers using jQuery, an indexed loop and an if condition, or some other complicated stuff. Modern browsers and ES6 gives you a simple solution in (almost) a single line of code:

HTML

<select id="selectElement" size="3" multiple>
    <option value="oranges">Oranges</option>
    <option value="apples">Apples</option>
    <option value="cherries">Cherries</option>
</select>

JavaScript

let selectElement = document.getElementById('selectElement');
let a = ['oranges', 'cherries'];
for (option of selectElement.options) option.selected = 
    a.includes(option.value);

There you go!
(Photo by Anthony Martino on Unsplash)

Big Tech 0wns web development

Latz — Mon, 11 Jan 2021 13:42:05 +0000

Web development is based on free software by developers like you and me, isn’t it? At first glance, this seems to be the case. Let’s take a look at the main tools modern web is mainly developed with nowadays:

Visual Studio Code
TypeScript
React
npm
GitHub
Chrome

Most of the tools are Open Source projects (VS Code only in parts, npm is proprietary). So where are the big companies? Well, all six tools and sites are owned by Big Tech:

Microsoft
Microsoft
Facebook
Microsoft
Microsoft
Google

The tools we use all day rise and fall with the benevolence of companies typically seen as enemies of Free Software by the majority of Open Source developers.

Especially GitHub and npm are irreplaceable because of their large data collection. If Microsoft decides to pull the plug from one moment to the next, the access to the vast collection of free code will be gone at least for some time and the build processes of millions of programs will break.

Of course, these services can and would be replaced by others, but it would take some time until dominant services will emerge and web developers would need to find an interim way of accessing their externalized source code.

Javascript – Swap classes of an HTML element

Latz — Thu, 01 Oct 2020 09:21:09 +0000

Recently I came across the problem, that I had to programmatically change a div’s color from red to green. Sounds simple and it’s actually quite simple if you know your JavaScript.

jQuery contains a function called “toggleClass()” that swaps class attributes in and out of an element. I looked for a similar function in ES6 but couldn’t find one. Florian Brinkmann (@FloBrinkmann) pointed me to “classList.toggle()” which does exactly the thing I’m looking for (it’s hidden in the “Examples” passage).

Here’s the naive solution to my problem:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
     .classList
     .toggle(className2);
 }

const myDiv = document.getElementById('myDiv'); 
toggleClass(myDiv, 'red', 'green');

The jQuery implementation contains the ability to define more than two classes to add or remove from the element. Using a new ES6 element (the spread operator) this can be implemented like this:

function toggleClass(element, ...classNames) {
{classNames.forEach((className) => {
  element
    .classList
    .toggle(className);
  })
}
toggleClass(myDiv, 'red', green', 'yellow');

jQuery's "toggleClass()" has some more functionality available but currently I don't have any need for it. For a start this is enough.