Category: programming

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)

Show your desktop

I know loads of WordPress developers by name and have an idea how they look. What I also find interesting is the way people work. Do they use a laptop, how many monitors do they use and other stuf). Here’s my desktop (I’ve tidied it up before taking the image :-)):

desktop.small.1
Click image to enlarge)

The machine is an “ASRock Z77 Extreme” with an i5 3,4 GHz processor, 8 GB of RAM and a Radeon HD7770 graphics card.
I’ve got two 24″ Benq monitors and yes, that’s a TV on the left side. The keyboard is a good old “Windows Natural Pro” and the mouse an IntelliMouse.

Ramon Fincken (@ramonfincken) kidded me that I have only two monitors and sent me a picture of his setup:

ramonafincken-small

What a desktop! To cite him “if it’s worth doing .. it’s worth overdoing”.

(Update: Ramon tweeted his PC spces: 16GB RAM, AMD FX 8350 8core, 2x 256MB dual output asus video cards)

What does your desktop look like? Take a picture and blog about it!

HTML/PHP: Single and double quotes

If PHP programmers are creating a link from variables often you can see the following code:

echo '<a href="' . $link . '" id="' . $id .'" class="' . $class . '">' . 
       $linktext . '</a>';

or

?>
<a href="<?php echo $link; ?>" id="<?php echo $id; ?>" 
   class="<?php echo $class; ?>"><?php echo $linktext; ?></a>
<?php

or

echo "<a href=\"$link\" id=\"$id\" class=\"$class\">$linktext</a>";

Apart from the personal preferences of the programmer all these snippets have one thing in common: they are hard to read. “Sure!”, you will say, “attributes in HTML have to be enclosed in double quotes and in PHP I have to use one of the above methods.” Are you sure? Do attributes really have to be enclosed in double quotes? The simple answer is: No!
Let’s take a look at the specification:

[…] By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa. […]

Double or single quotation marks. That will make things much easier:

echo "<a href='$link' id='$id' class='$class'>$linktext</a>";

As you see the code is much easier to read and that simply happened because you read the specs!