Static And Dynamic Caching On Incapsula Can Cause CORS errors

We’re loading an SVG sprite via AJAX from our CDN because SVG is XML and that’s not allowed to be loaded cross-domain. That all worked fine across all our environments, but it broke on production:

1
2
3
Access to XMLHttpRequest at 'https://cdn.foo.bar/images/svg/sprite.svg' from origin 
'https://www.foo.bar' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

That was strange because for the “cdn.foo.bar” app service was already configured to allow all origins: “ALLOWED ORIGINS = *”.

It turned out the Incapsula WAF caching was configured to Static + Dynamic. After disabling caching in Incapsula the CORS error was gone.

Business Trip To Belgrade, Serbia - Day 3

Click on an image to start a slideshow.

The third day at the Belgrade office. See also day one and day two.

Some office photos: yes, there are standing-, pool- and table football tables, just as we have in Amsterdam. Dinner at the lovely Majstor i Margarita restaurant (*), adventurous cocktails at the well-hidden Beogradski Koktel Klub, and some street photos, including the second of two pieces of street art advertising veganism I saw tonight.

(*) The Majstor i Margarita restaurant is probably named after “one of the best novels of the 20th century”

From Wikipedia:

The Master and Margarita (Russian: Мастер и Маргарита) is a novel by Russian writer Mikhail Bulgakov, written in the Soviet Union between 1928 and 1940 during Stalin’s regime. A censored version was published in Moscow magazine in 1966–1967, after the writer’s death. The manuscript was not published as a book until 1967, and then first in Paris. A samizdat version circulated that included parts cut out by official censors, and these were incorporated in a 1969 version published in Frankfurt. The novel has since been published in several languages and editions.

The story concerns a visit by the devil to the officially atheistic Soviet Union. The Master and Margarita combines supernatural element with satirical dark comedy and Christian philosophy, defying a singular genre. Many critics consider it to be one of the best novels of the 20th century, as well as the foremost of Soviet satires.

Business Trip To Belgrade, Serbia - Day 1

Click on an image to start a slideshow.

This week the Amsterdam part of our team (two developers, two testers plus our Manager New Business Development and Senior Director Software Engineering) are in Serbia to join the Belgrade part of our team (two developers working there via a nearshoring construction).

Normally we communicate via chat and video-conferencing with Teams, but it’s also very important to work face-to-face once in a while. Last time they came to Amsterdam, so now we’ve come to Serbia.

These are the photos of day one. Some frst impressions: very photoghenic Brutalist architecture and picturesque cobblestone streets, OMG they’re smoking in restaurants!, nice beer, nice food, nice Slivovitz.

Belgrade reminds me of places like Vienna and Prague, but also of Istanbul: you’re in eastern Europe but also closer to the heart of the former Ottoman Empire.

Everybody Loves Ringo Photobook

We have two dogs (and three cats, two hairless rats, a sweet water aquarium, a pond in the garden with koi, goldfish and a sturgeon, and five beehives), and both of them have instagram accounts: the chichuahua Ringo has @everybodylovesjuno and the whippet greyhound Juno has @everybodylovesringodog.

As a Sinterklaas present for my wife I created this 24-page 14 x 14 cm hard cover photo book on Albelli:

(Don’t wait for the loading spinner to finish, just click next: >)

RELX End Of Year Party

Click on an image to start a slideshow.

This year’s RELX End Of Year Party (that’s a party for all of RBI, Elsevier and LexisNexis in the Amsterdam location) was held at the KIT Royal Tropical Institute and this was the dresscode:

Come dressed as a magical forest creature: a fairy, an elf, a unicorn, or maybe a dragon?
Come as your favourite character from Middle Earth, Avatar or Sherwood fairy-tale forest.
Wrap yourself in lights, leaves and leprechaun hats and create your own mystical forest character.

It was fun!

On using code as illustration

This morning we had a team breakfast session in the recently redecorated Herman Boerhaave (*) meeting hall of our Millennium Tower.

Part of the decoration of the wall behind the projector screen was this bit of html:

Below I’ll explain why I’m certain that for every meeting I’ll have there I’ll be annoyed by it.

I’ve found the source of the code (“Here at HTML.am, you can find all things HTML - from HTML codes, HTML editors, HTML generators and more.”) and the complete snippet is this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:400px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

What’s wrong with this code

  • The CSS is inline.
  • The CSS and HTML are not indented.
  • There’s no space between the properties and the values.
  • For such a short <style> declaration there’s no need for <!-- Start/End Styles --> comments.
  • The colors are not defined in a consistent way: a background-color is defined in hexadecimal (#000, which would be black as a named color) while the color is defined as the named color white.
  • The classname does not follow any CSS naming convention.
  • The table does not have a <thead> and tbody.

Here’s what I would have like to see on the wall

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.c-table--rigidtwocolumn {
width: 400px;
background-color: #eee;
border-collapse: collapse;
}

.c-table--rigidtwocolumn th {
background-color: #000;
color: #fff;
width: 50%;
}

.c-table--rigidtwocolumn td, .c-table--rigidtwocolumn th {
padding: 5px;
border: 1px solid #000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="c-table--rigidtwocolumn">
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr>
</tbody>
</table>

Why .c-table--rigidtwocolumn?

  • c-table is the component name
  • --rigidtwocolumn describes the modifier of the component: it’s a fixed width table that can only contain two columns of equal width

Here’s a fiddle if you want to improve my fix!

(*) About Herman Boerhaave

Simplex sigillum veri: ‘The simple is the sign of the true’

Herman Boerhaave was a Dutch botanist, chemist, Christian humanist, and physician of European fame. He is regarded as the founder of clinical teaching and of the modern academic hospital and is sometimes referred to as “the father of physiology,” along with Venetian physician Santorio Santorio (1561–1636). Boerhaave introduced the quantitative approach into medicine, along with his pupil Albrecht von Haller (1708–1777) and is best known for demonstrating the relation of symptoms to lesions. He was the first to isolate the chemical urea from urine. He was the first physician to put thermometer measurements to clinical practice. His motto was Simplex sigillum veri: ‘The simple is the sign of the true’. He is often hailed as the “Dutch Hippocrates”.

Source: https://en.wikipedia.org/wiki/Herman_Boerhaave

Now Playing: Van Morrison - Into The Mystic

The song has an easy groove, beginning with acoustic guitar and including isolated horn and string charts, as Morrison evokes a sailor’s pledge to come home from the sea to his lover and “rock [her] gypsy soul.” Typical for Morrison, however, the story line is sketchy and, in any case, less important than the mood. As a lyricist, Morrison is often less interested in using words for meaning than for sound, and that is the case here. He once said that his original title for the song was “Into the Misty,” and he may have intended a meaning such as “into the mist,” since the song refers to fog horns among other things nautical.

Source: https://www.allmusic.com/song/into-the-mystic-mt0004460692

Turning off ligatures - two letters that are joined - for your font

The font we’ll be using in Nextens starting with our next release has ligatures (“a ligature occurs where two or more letters are joined as a single glyph”) turned on by default. It’s a nice typographic effect, but for some words in Dutch it doesn’t work so well.

This is the default Lato:

This is Lato with ligatures turned off:

You can turn it off everywhere:

1
2
3
html {
font-feature-settings: "liga" 0;
}

or only for headings (where it’s more prominent):

1
2
3
h1, h2, h3, h4, h5, h6 {
font-feature-settings: "liga" 0;
}