CSS Quick Tip: Line Breaks in Flexbox Multi-line mode

Took my quite a while to find this, because it’s hardly mentioned anywhere except as a note on the Mozilla Developer Network:

When you are using a flexbox layout in multi-line mode (e.g. the ‘flex-wrap’ property is set to wrap), you can force flex items to start on a new line by setting the ‘page-break-before’ property.

Boxplot renderer plugin for jqPlot

For work I needed a way to show boxplots (see diagram to the right) using the jqPlot library. All I had to do was override the draw() method of OHLCRenderer (see code below).

Update 13.10.2017: Upon request I created a working demo of the BoxplotRenderer using some helper classes to setup jqPlot charts from another project.

boxplot diagram
Example of a histogram and boxplot rendered with the jqPlot library.

Continue reading “Boxplot renderer plugin for jqPlot”

PHP Tip: Binding variables in a SQL WHERE IN clause

Have you ever wondered if it is possible to bind an unknown amount of variables in a SQL WHERE IN clause, e.g.:

SELECT id, text FROM myTable WHERE id IN (:myId1, :myId2, myId3, ...)

Use a OCI collection object and wonder no more:

$keyList = array(100, 250, 350);
$stmt = oci_parse($cnn, "SELECT id, text FROM myTable WHERE id IN (SELECT column_value from table(:myIds))");
$coll = oci_new_collection($cnn, 'ODCIVARCHAR2LIST','SYS');
foreach ($keyList as $key) {
oci_bind_by_name($stmt, ':myIds', $coll, -1, OCI_B_NTY);

while($row = oci_fetch_array($stmt, OCI_ASSOC)) {
    echo "{$row['ID']}, {$row['TEXT']}";

I found the above solution by ThinkJet on stackoverflow.

The dawn of the Nikon 300mm f/2.8

Great Grey Owl (Strix nebulosa) in flight
A flying female Great Grey Owl (Strix nebulosa), which is wet from the rain. Nikon D800 with 300mm f/2.8, 1/3200s at f/3.2 and ISO 2500.

For a long time my Nikon lens 300mm f/2.8G ED VR II has been upstaged by the 600mm f/4G ED VR when photographing birds. But after a stupid tumble on my part which not only disabled its bigger 600mm sister, but also ripped some parts out of my camera D800 and completely destroyed the GPS, it was ready to shine.

All of the following pictures were taken with the Nikon D800 and the 300mm f/2.8 in Sweden, some in combination with the teleconverter TC 1.4 II.They are all at least 4000px wide.

Continue reading “The dawn of the Nikon 300mm f/2.8”

How to import c3.js with the dojo AMD loader

I came across the nice chart library c3.js, which is based on d3.js. In order to load it via an AMD require call with dojo, you also need to set the main property in the dojoConfig, e.g.:

dojoConfig = {
    packages: [
        { name: 'd3', location: '../../../d3', main: 'd3' }
        { name: 'c3', location: '../../../c3', main: 'c3' }

This will let you load c3.js in your module, e.g.:

define(['d3', 'c3', ...], function(d3, c3, ...) {

Best Vector Format to Import/Export in LibreOffice

Quip tip: When creating illustrations with LibreOffice Draw I found the format “Star View Metafile (SVM)” to be the best choice for re-import in LibreOffice Writer.

How to use Google Maps API with Dojo and AMD

If you are using AMD or RequireJS for your JavaScripts and you would also like to use the Google Maps JavaScript API you have a problem. You can’t just require in the script file and then access the google.maps object from within your script, e.g.:

require(['http://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID'], function() {
    var myMap = new google.maps.Map(mapDiv, mapOptions);

This doesn’t work because the map script itself loads another script, which might not have been loaded yet, when you access the google.maps.Map object.

But fortunately, there is a neat loader module by Corey Alix, which solves the problem:

Continue reading “How to use Google Maps API with Dojo and AMD”

List of Bird Species from Trip up to Rewa Head

Last year I traveled up to the Rewa River Head in Guyana. On the month long journey I was able to identify the following 104 bird species with the help of our guides:

Continue reading “List of Bird Species from Trip up to Rewa Head”

Power off your SONOS Bridge

If you want to be able to turn off the power of your SONOS components without any hiccups when turning them back on later (e.g. prevent multiple use of the same IP in your local network), it seems advisable to reserve their IP addresses on your router. This is important especially in the case of the Bridge.

For my ZyXEL router this setting can be found under Network -> LAN -> Client List and would look like the following:

DHCP Client Table

# Status Host Name IP Address MAC Address Reserve Modify
1 PC1 aa:bb:cc:dd:ee:ff
2 NOTEBOOK aa:bb:cc:dd:ee:ff
3 SonosZB aa:bb:cc:dd:ee:ff
4 SonosZP aa:bb:cc:dd:ee:ff
5 aa:bb:cc:dd:ee:ff
6 aa:bb:cc:dd:ee:ff
7 aa:bb:cc:dd:ee:ff


An easy way to get the MAC addresses of all the SONOS devices is to open Windows Explorer -> Network -> Media Devices and then rightclick or doubleclick on each device icon and choose properties. The MAC address is listed under Troubleshooting Information.

CSS trick: Setting background color of a selected HTML option element

Update 02.02.2018: As noted by Tom this now only works when the attribute multiple is set.

Have you ever wanted to set the background color of a selected OPTION element of a drop down ? Unfortunately, setting the CSS background-color property does not work for (most/all?) browsers, but there is a workaround using the background-image property instead:

option:checked, option:hover {
    color: white;
    background: #488f8f repeat url("data:image/gif;base64,R0lGO...");

If you are interested in highlighting when hovering with the mouse only, then setting the background-color property is enough, e.g:

option:hover {
  background-color: #488f8f; 

You can convert your image to a data url online on Data Url Maker.