Journal tags: gesiowka

I’m in Boston right now, getting ready to speak at An Event Apart. This will be my second (and last) Event Apart of the year—the other time was in Seattle back in April. After that event, I wrote about how inspired I was:

It was interesting to see repeating, overlapping themes. From a purely technical perspective, three technologies that were front and centre were:

• CSS grid,
• variable fonts, and
• service workers.

From listening to other attendees, the overwhelming message received was “These technologies are here—they’ve arrived.”

I was itching to combine those technologies on a project. Coincidentally, it was around that time that I started planning to publish The Gęsiówka Story. I figured I could use that as an opportunity to tinker with those front-end technologies that I was so excited about.

But I was cautious. I didn’t want to use the latest exciting technology just for the sake of it. I was very aware of the gravity of the material I was dealing with. Documenting the story of Gęsiówka was what mattered. Any front-end technologies I used had to be in support of that.

First of all, there was the typesetting. I don’t know about you, but I find choosing the right typefaces to be overwhelming. Despite all the great tips and techniques out there for choosing and pairing typefaces, I still find myself agonising over the choice—what if there’s a better choice that I’m missing?

In this case, because I wanted to use a variable font, I had a constraint that helped reduce the possibility space. I started to comb through v-fonts.com to find a suitable typeface—I was fairly sure I wanted a serious serif.

I had one other constraint. The font file had to include English, Polish, and German glyphs. That pretty much sealed the deal for Source Serif. That only has one variable axis—weight—but I decided that this could also be an interesting constraint: how much could I wrangle out of a single typeface just using various weights?

I ended up using font weights of 75, 250, 315, 325, 340, 350, 400, and 525. Most of them were for headings or one-off uses, with a font-weight of 315 for the body copy.

(And can I just say once again how impressed I am that the founding fathers of CSS were far-sighted enough to keep those font weight ranges free for future use?)

Getting the typography right posed an interesting challenge. This was a fairly long piece of writing, so it really needed to be readable without getting tiring. But at the same time, I didn’t want it to be exactly pleasant to read—that wouldn’t do the subject matter justice. I wanted the reader to feel the seriousness of the story they were reading, without being fatigued by its weight.

Colour and type went a long way to communicating that feeling. The grid sealed the deal.

The Gęsiówka Story is mostly one single column of text, so on the face of it, there isn’t much opportunity to go crazy with CSS Grid. But I realised I could use a grid to create a winding effect for the text. I had to be careful though: I didn’t want it to become uncomfortable to read. I wanted to create a slightly unsettling effect.

Every section element is turned into a seven-column grid container:

section {
    display: grid;
    grid-column-gap: 2em;
    grid-template-columns: 2em repeat(5, 1fr) 2em;
}

The first and last columns are the same width as the gutters (2em), effectively creating “outer” gutters for the grid. Each paragraph within the section takes up six of the seven columns. I use nth-of-type to alternate which six columns are used (the first six or the last six). That creates the staggered indendation:

section > p {
    grid-column: 1/7;
}
section > p:nth-of-type(even) {
    grid-column: 2/8;
}

That might seem like overkill just to indent every second paragraph by 4em, but I then used the same grid dimensions to layout figure elements with images and captions.

section > figure {
    display: grid;
    grid-column-gap: 2em;
    grid-template-columns: 2em repeat(5, 1fr) 2em;
}

Then I can lay out differently proportioned images across different ranges of the grid:

section > figure.landscape > img {
    grid-column: 1/5;
}
section > figure.landscape > figcaption {
    grid-column: 5/8;
}
section > figure.portrait > img {
    grid-column: 1/4;
}
section > figure.portrait > figcaption {
    grid-column: 4/8;
}

Because they’re positioned on the same grid as the paragraphs, everything lines up nicely (and yes, if subgrid existed, I wouldn’t have to redeclare the grid dimensions for the figures).

Finally, I wanted to make sure that the whole thing could be read offline. After all, once you’ve visited the URL once, there’s really no reason to make any more requests to the server. Static documents—and books—are the perfect candidates for an “offline first” approach: always look in the cache, and only go to the network as a last resort.

In this case I used a variation of my minimal viable service worker script, and the result is a very short set of instructions. There’s a little bit of pre-caching going on: I grab the variable font and the HTML page itself (which includes the CSS inlined).

So there you have it: variable fonts, CSS grid, and service workers: three exciting front-end technologies, all of which can be applied as progressive enhancements on top of the core content.

Once again, I find that it’s personal projects that offer the most opportunities to try out new or interesting techniques. And The Gęsiówka Story is a very personal project indeed.

While I was in Warsaw for a conference last week, I sought out a commerative plaque in a residential neighbourhood. The English translation reads:

On 5th August 1944 “Zośka” the scouts’ battalion of the “Radosław” unit Armia Krajowa captured the German concentration camp “Gęsiówka” and liberated 348 Jewish prisoners, citizens of various European countries, many of whom later fought and fell in the Warsaw Uprising.

I knew about the plaque—and the incredible events it commemorates—thanks to a piece of writing called The Gęsiówka Story by Edward Kossoy, a relative of mine.

My ancestral lineage is an unusual mix. I’ve got generations of Irish on my mother’s side, and generations of Eastern European jews on my father’s side.

Edward wasn’t closely related to me. He was my grandfather’s cousin. My father’s father (from whom I got my middle name, Ivan) was driving ambulances in London during the war. Meanwhile his cousin Edward in Poland was trying desperately to get his family out. Separated from his wife and daughter, he was arrested by the Russians in Ukraine and sentenced to hard labour in a gulag. He survived. His wife and child were did not. They were murdered by the nazis during Operation Harvest Festival.

Edward was a lawyer. He spent the rest of his life fighting for reparations for victims of the Holocaust. He represented tens of thousands of jews, Poles, and Roma. He lived in Tel Aviv, Munich, and finally Geneva. That was where he met the Polish war hero Wacław Micuta who first told him about what happened at Gęsiówka. What he heard sounded implausible, but when he found Gęsiówka survivors among his own clientelle, Edward was able to corrobarate Micuta’s story.

(Micuta, by the way, had much to discuss with Edward’s second wife Sonia. She fought in the Warsaw Ghetto uprising, escaping by being smuggled out in a suitcase.)

As well as being a lawyer, Edward was also an author. In 2004 he wrote The Gęsiówka Story for the journal Yad Vashem Studies. I came across it in PDF form while I was searching for more details of Edward’s life and legacy. I was completely astonished by what I read—if it were a Hollywood film, you would think it too far-fetched to be true.

I decided to transfer the story into a more durable format. I’ve marked it up, styled it, and published it here:

gesiowka.adactio.com

The subheading of The Gęsiówka Story is “A Little Known Page of Jewish Fighting History.” I certainly think it’s a piece of history that deserves to be more widely known. That’s why I’ve turned it into a web page.

When we talk about documents on the web, we usually use the word “document” as a noun. But working on The Gęsiówka Story, I came to think of the word “document” as a verb. And I think the web is well-suited to documenting the stories and experiences of our forebears.

Edward died six years ago, just one year shy of a hundred. I never got to meet him in person, which is something I very much regret. But by taking his words and working with them while trying my best to treat them with respect, I’ve come to feel a bit closer to this great man.

This was a little labour of love for me. I hope I did his words justice. And I hope you’ll read The Gęsiówka Story.