Author: latz

How-to split a number into equal chunks

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 4 $totalNumber is divided by a modulo operator (“%” is the PHP token for modulo). The operator returns the remainder of the division (194 in this case). 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 addon icon

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

  1. Hamburger
  2. Addons and Themes
  3. …
  4. 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

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:

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

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

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:

  1. Visual Studio Code
  2. TypeScript
  3. React
  4. npm
  5. GitHub
  6. 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:

  1. Microsoft
  2. Microsoft
  3. Facebook
  4. Microsoft
  5. Microsoft
  6. 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.

(Photo by Max Bender on Unsplash)