Anna Traussnig

Jekyll In Style

2017-01-17T00:00:00+01:00

Feeling in the mood for a change, I recently moved my website to Jekyll. This change wasn’t about the look and feel, but purely about leveraging the simplicity of the Jekyll framework. The appearance of the site had to remain absolutely identical.

Let’s say the information on how to style Jekyll sites is out there, but it’s a bit scattered. So here is my version of a step-by-step guide:

1) get rid of the default theme

Open the _config.yml of your Jekyll site (at the root of the project). You should see that the default theme is set to ‘minima’.

theme: minima

Delete the theme line and get rid of any predefined styling.

2) create your own layouts

If you now try to serve the site (jekyll serve), you will notice that, amongst others, Jekyll is complaining that it cannot find the ‘post’ layout. To remedy to this, create a _layouts directory at the root of the project.

Then define a default layout. In the _layouts folder, create a default.html file, which will describe your default layout, and add a {{ content }} tag to make sure any nested content will be included.

A typical default.html layout file could look like this:

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>{{ page.title | escape }}</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>

After that, we have to implement our more specific layouts. As Jekyll offers the possibility to nest layouts, we can specify a parent layout in the front matter and then only take care of the layout of the content block we declared in default.html.

Here is a simplistic post.html layout:

---
layout: default
---
<h1>I'm a Post:</h1>
<h2>{{ page.title }}</h2>

{{ content }}

<p>Thanks for reading me!</p>

And a home.html layout (for our index page):

---
layout: default
---
<h1>Introducing:</h1>
<h2>{{ site.title }}</h2>

<ul>
    {% for post in site.posts %}
        <li><a href="{{ post.url | relative_url }}">{{post.title}}</a></li>
    {% endfor %}
</ul>

<p><a href="/about.html">Read more</a> about this site!</p>

We won’t implement an ‘about’ layout here, so you should replace the more specific ‘page’ layout used in about.md by our generic ‘default’ layout. (Alternately, you can create your own ‘page’ layout just like we did for ‘post’.)

---
layout: default
title: About
permalink: /about/
---

If you now try to run jekyll serve, you’ll observe that the server is still complaining about a missing ‘include’. We will talk about those files in the next subsection.

3) keep it DRY

Your ‘includes’ are those files you may want to extract from your pages and layouts to make your code cleaner and more modular. They should be placed inside an _includes folder. So go ahead and create that folder at the root of your project.

Let’s open a new file called stupid-snippet.html in the _includes directory:

<p>I'm a bit stupid, but at least I'm here!</p>

At the moment, the server is trying to retrieve includes that don’t exist anymore (they were part of the ‘minima’ theme). To fix this, open the about.md page and change the text to remove the default includes (and text) and use use our own content:

We are busy making a new layout and styling it...
{% include stupid-snipped.html %}

You should now be able to serve (and view!) your Jekyll project. Woohoo!

3) add your own CSS

At this point you might feel a bit cheated. The layout we created so far doesn’t look much like an improvement! What we want to do is be able to create and apply our own stylesheets to the website. To get started with this, create not one, but two directories at the root of the project: _sass and assets.

The _sass directory is conceived to contain… your sass stylesheets. Let’s create a typography.scss file:

body {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    color: #dedede;
    background: #735959;

    a { color: #fff; }
}

And a layout.scss file:

body { margin: 10%; }

Now that we have those files defined, we can create a main.scss in the assets directory (as files in _sass are only available for import). This main.scss file will be compiled into main.css by Jekyll, which we will be able to load into your layouts.

This is how assets/main.scss could look like:

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

@import "typography";
@import "layout";

… Which we load into default.html:

<link rel="stylesheet" href="{{ '/assets/styles/shared.css' | relative_url }}">

Of course then you are absolutely free to add classes to your layouts in order to style your content even more! (You can also drop html into your Markdown files, whenever you need that extra bit of customisation.)

4) load page-specific CSS

It is generally recommended to load all the CSS in the head of the page in order to prevent a flash of unstyled content. However, in a nested template structure such as ours, the head is defined in the topmost template (here: layout.html).

Problem: we want to load page- or layout-specific CSS without having to redefine a base layout every time. Solution: use a front matter css value and parse it to build the head of layout.html.

Here is how we give this capability to the head of layout.html:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="/assets/main.css">
    <title>{{ page.title | escape }}</title>

    {% for css in layout.css %}
        <link rel="stylesheet" type="text/css" href="/assets/" />
    {% endfor %}

    {% for css in page.css %}
        <link rel="stylesheet" type="text/css" href="/assets/" />
    {% endfor %}
</head>

Let’s put this into use by adding a blue-bg.css file into the assets directory:

body { background: #29183e; }

… Which we can now for instance load into about.md. To do so, we simply need to update the front matter of the file:

---
layout: default
title: About
permalink: /about/
css: blue-bg.css
---

This will load our custom stylesheet in about.md and turn the background of the page blue. (By the way, the technique would also work for includes or Javascript files!)

And… voilà! It’s now up to you to get cracking and create your own fabulously unique Jekyll site.

I tend to find static tutorials difficult to follow, so I created a small GitHub repo where you can go through history and follow the steps commit after commit. Go have a look.

In the meantime, happy coding :)

Scroll Advert

2017-01-04T00:00:00+01:00

The trick to reveal an SVG path on scroll is relatively well-known. Every SVG path comes with two useful attributes: stroke-dasharray, which determines the dash-gap pattern of the path (dotted or dashed line, how long the dashes are, how long the gaps are, etc.), and stroke-dashoffset, which controls the offset of the pattern specified by stroke-dasharray.

Now imagine that our dash-gap pattern consists in a dash as long as the path itself, followed by a gap also as long as the path. Depending on the offset we choose, we can either have the dash fully covering the path, making said path visible, or we can place the gap over the path, hiding it entirely. Anything between those two extremes yields a partial reveal of the path.

Using this trick, we adjust the dash offset proportionally to the scrolling fraction of the window in order to create a smooth scroll-based reveal. The more the visitor scrolls, the more she sees from the path.

A few months ago, I decided to play around with this technique and see how far it could be pushed. The result was showcased here for a while, before moving to GitHub pages. (Unfortunately, fancy self-promotion splash pages come with an expiry date – or so I believe.)

The feedback I got from it was… well, I guess it was mixed. But it was the good kind of mixed. What I mean is that everybody I showed the page to seemed to either love it or be really skeptical. Polarising responses are good (nice article by the way – go read it). Funnily enough, the comments were strongly segregated by age. Young people found it cool, older people had a hard time figuring out what the deal was and why they should waste half a minute of their life scrolling down (… because it’s fun?). I won’t dwell on feedback, but eventually we also build that stuff for people, so their opinion kind of matters. Right?

So, how do we build that kind of animation? Sit tight, I’ll tell you everything.

As you can see, a fair bit happens during scrolling, but obviously not everything happens at the same time. We should be able to specify a start and an end scrolling fraction between which we want the animation to take place, and get some kind of ‘relative scroll fraction’ based on those boundaries, instead of using the whole window. Let’s transform the total scroll fraction into a relative measure:

function getTotalScroll() {
    return (document.documentElement.scrollTop + document.body.scrollTop) / 
           (document.documentElement.scrollHeight - document.documentElement.clientHeight);
}

function getRelativeScroll(startFraction, endFraction) {
    var totalScrollFraction = getTotalScroll();
    var relativeScrollFraction = (totalScrollFraction - startFraction) / 
                                 (endFraction - startFraction)
    return Math.clip(relativeScrollFraction, 0, 1);
}

Now, we need a way to gradually move from any initial to any final (numerical) property value based on relative scroll fraction. The idea here is to linearly interpolate (and assign) a property value using a user-defined setter function. That way, any property becomes animatable, as long as it is numerical.

function changeOnScroll(selector, scrollFractions, values, setValue) {
    var object = document.querySelector(selector);
    var scrollFraction = getRelativeScroll(scrollFractions[0], scrollFractions[1]);

    if (scrollFraction > 0 && scrollFraction < 1) {
        var newValue = values[0] + scrollFraction * (values[1] - values[0]);
        setValue(selector, newValue);
    }
}

Note that while this approach works well, it requires the user to write a new function for every new property, even when the logic remains essentially the same. Not super convenient, but it does the job.

For instance here is how we animate the opacity of an element:

function setOpacity(selector, opacity) {
    document.querySelector(selector).setAttribute('opacity', opacity);
}

window.addEventListener("scroll", function(e) {
    changeOnScroll('#my-selector', [0.07, 0.1], [0, 1], setOpacity);
});

A more particular case is the reveal (or hiding) of paths. All paths have a set direction, which in turn determines from which end the animation starts. To be able to change the direction of animation without re-generating the path, we have to tweak the basic dash-offset code by addind a direction parameter, and create two setter functions (one for each direction).

function changeDashOffset(selector, value, direction) {
    var path = document.querySelector(selector);
    var pathLength = path.getTotalLength();
    var drawLength = pathLength * value;

    path.style.strokeDashoffset = pathLength - (direction * drawLength);
}

//setters
function revealPath(selector, value) {
    changeDashOffset(selector, value, 1);
}


function revealPathReverse(selector, value) {
    changeDashOffset(selector, value, -1);
}

The last non-standard parameter we should handle is colour. Because colour is in fact three values bundled into one, it requires a separate interpolation for each colour channel:

function getColorMix(color1, color2, factor) {
    var rgb1 = hexToRgb(color1);
    var rgb2 = hexToRgb(color2);
    var newRgb = [];
        
    for (var i = 0; i < 3; i ++) {
        newRgb.push(rgb1[i] + factor * (rgb2[i] - rgb1[i]));
    }

    return rgbToHex(newRgb);
}

function colorOnScroll(selector, scrollPositions, colors) {
    var object = document.querySelector(selector);
    var scrollFraction = getRelativeScroll(scrollPositions[0], scrollPositions[1]);

    if (scrollFraction > 0 && scrollFraction < 1) {
        object.style.fill =  getColorMix(colors[0], colors[1], scrollFraction);
    }
}

(Hex/RGB conversion functions recklessly stolen from StackOverflow.)

And that’s essentially all we need to build our animations. To give you an idea, here is how the lightbulb animation starts:

window.addEventListener("scroll", function(e) {
    // bulb appears
    changeOnScroll('#lightbulb', [0.03, 0.04], [30, 18], setRadius);
    changeOnScroll('#light-fitting', [0.03, 0.07], [0, 1], revealPath);
    changeOnScroll('#lightbulb', [0.06, 0.08], [18, 21.6], setRadius)
    changeOnScroll('#top-shadow-straight', [0.07, 0.1], [0, 1], setOpacity);
    changeOnScroll('#bottom-shadow-straight', [0.07, 0.1], [0, 1], setOpacity);
    colorOnScroll('#lightbulb', [0.1, 0.12], ['#877F5C', '#F89406'])
    [...]

I left some details on the side, but the code is on GitHub, so if you are curious about the whole thing and want to dig into it, feel free to have a look.

Also! I refactored the code, fixed the bits I didn’t like (no more setter and separate colour functions), and created a nifty little library out of it. It’s called SVG-Scroll and it’s on NPM. I purposely kept it as simple as I could. It doesn’t require any third party dependencies and it’s complete enough to recreate everything on my promotion page. If you are thinking about making something similar, go check it out (no pun intended)!

Comments? Send me a tweet or an email!

The Typist

2016-03-01T00:00:00+01:00

A Cliché

Her whole life, the typist had wanted to be a writer, and it was purely coincidental that she decided to focus on the technical aspect of things.

There weren’t many typing positions available in the modern world. Instead of looking for another career, the typist bought a pink suit, a cute hat, wiggled her hands, and stepped into the nineteen sixties. (It never occurred to her that time-travel was physically impossible. After all, many people had funny skills.)

She immediately found a job at a lawyer’s office. From morning to evening she would type tirelessly, until her fingers were burning. Once she knew everything about the words of the law, she left, and started typing for an old doctor, thus learning the words of medicine. She then moved on, successively working for advertisers, real-estate agents, professors, factory owners, and even for a local radio station.

She soon became known as the best typist in town. She would lay her hands on the keyboard, purse her lips, and the words would happen. She was so competent, people quickly went on to other tasks, almost forgetting that she existed. No one stopped at her desk or told her what to do. Had they done so, it wouldn’t have made much of a difference. She knew the words, and the words needed to be typed. The words needed her.

Interestingly enough, no one ever seemed to notice there was something odd about that girl. They never saw beyond the perfect documents that came out of her typewriter – out of nowhere, really.

Her? She was just a pretty typist.

The Wealthiest Woman On Earth

2016-02-02T00:00:00+01:00

Long before religions, kingdoms and cities, the wealthiest woman on Earth found a nugget of gold at the bottom of a stream. She inspected it carefully – gasped. For sure, she was holding a piece of sun. How did it get here?

It was the first time humanity ever saw gold.

And there she was: a young woman with wild eyes and dirty hair, a bit naked, wearing the sun on her chest. What would the others say to such a miracle? After all, they were now the wealthiest tribe on Earth. People whispered. It’s shining! Look at her chest! Look at the sun! The wealthiest of woman of Earth smiled and started talking.

It was the first time they saw gold too. They couldn’t hear what she was saying. They couldn’t see where she was standing. How could they? She wasn’t one of them anymore. She had the necklace of a goddess. This commanded respect. So much respect.

No one talked to the woman: it was not appropriate. No one shared food with the woman: it was not appropriate. No one touched the woman: it was definitely not appropriate. Sometimes, people would briefly look at the necklace, before lowering their gaze. Not appropriate.

Of course, the wealthiest woman on Earth understood. She knew about respect. She understood what she was now: a sacred ghost, or maybe even the shadow of a god. She deserved this respect. Every day, she stood under the sun, without friends and without food, growing thinner and weaker, waiting for another miracle to happen. Or maybe for a god.

Eventually she got ill. Too much sun, not enough to eat. On her last day, she asked for the healer, but the healer refused to see her. He had too much respect for ghosts.

After she died, the tribe decided to return the gold to the sun. Everybody nodded, and agreed that they didn’t need any more ghosts or holy shadows in these parts. At this moment, one man stood up. Without a word, he took the necklace and slowly walked away.

The wealthiest man on Earth left, and didn’t ever think about coming back.

Pigments Of Death Awards

2016-01-27T00:00:00+01:00

As a web developer, I often have to do a bit of colour magic. Thank goodness it’s not very difficult. I change a line or two in a file, save the file, and there you go: the colour on the screen changes magically. It’s so easy, it’s amazing.

Has colour always been that easy? Certainly not. So let’s get a bit nostalgic and remind ourselves of the good old times when colouring stuff was still a true health and safety hazard. From plain weird to downright deadly, 5 pigments to remember. (And forget...)

Dead Mouse Award:

Paris Green

Heavily dosed with arsenic, this one started its career as a rodent killer in the Parisian sewage system – hence the name – before expanding into the insecticide market. As you would expect, it is highly toxic and, surprise! degrades into a gas with time. But it has a nice, fresh, soothing green colour, so impressionists like Monet and Renoir got hooked.

Interior designers also quickly jumped on the bandwagon, leading to an unexpected surge of poisonous wallpaper and arsenic fumes inside 19th century homes.

Rouge Award:

Vermilion

Early vermilion was ground from a bright red stone with an enchanting name: cinnabar. As usual, reality turned out to be slightly less enchanting for those mining it, since they were actually mining mercury all day long. It didn't stop anyone though. Eventually, alchemists discovered how to synthesise the pigment by mixing sulfur and mercury together.

Throughout 10'000 years of vermilion history, the pigment has featured literally everywhere: in prehistorical art, on pre-Columbian monuments and graves, in Roman houses, on Chinese palaces, temples and lacquerware, in medieval manuscripts and on Renaissance canvasses, on Venetian cheeks and on Indian foreheads, and even in food. No comment.

This mania probably killed quite a few people along the way, so it is safe to assume that humanity really likes red.

Michelangelo Award:

White Lead

Known since Antiquity, white lead was all over art history until the rise of titanium white, around 1920. Painters loved its vibrancy and when you love something, you don't care if it's trying to kill you.

Aside from art, white lead got used on the hulls of English ships and on the faces of Venetian beauties, which couldn't have been very beneficial. The ships benefited from the treatment more than the Venetians, as the paint waterproofed the wood and protected it from worms. The Venetians died early.

White lead has a few other pretty names, such as Venetian ceruse and spirits of Saturn. We still refer to lead poisoning as saturnism.

Marie Curie Award:

Yellowcake

Yellowcake = powdered uranium. Yes, for real. Do I need to say any more? While yellowcake is still in use for safer things, such as atomic bombs and nuclear reactors, it also enjoyed a stint in the world of ceramics, where the stunning yellow glazes didn't pass unnoticed. It then got banned, apparently more because of the radioactive glow of the word uranium than because of the actual radiation levels.

Hot Piss Award:

Indian Yellow

You know when you have that bunch of cows, but milk production is, like, too mainstream for you, so you decide to put your cows on a diet of organic vegan fair-trade mango leaves and collect their urine to produce a dark yellow pigment? That's right bitch, that's how you make Indian yellow.

One thing they will never take away from us, as a species we are damn creative.

The Box

2016-01-13T00:00:00+01:00

I always wanted to know more about the future. So when a lame antiquarian offered to sell me a so-called box of futures, I did not hesitate very long.

Of course he wouldn’t let me look inside, but I inspected the outside carefully before purchasing it – I am not an idiot. The box seemed authentic enough. Also, the price was very reasonable for such a rare object: about one month of salary. I went to the bank and paid the man cash.

I left the shop with my box in a bag. My box of futures. I felt a bit anxious. Futures can leak easily, and putting them back inside isn’t something just anyone can do. I was so afraid of the jolts of mechanical transportation that I decided to skip the metro and walk home. It was a long walk.

It has been a while now, and the box is still closed. I must admit that I’m afraid to open it. It’s such a serious decision.

But I spend a lot of time looking at it.

I enjoy it more and more, putting the box on my little table, sitting on the sofa, and staring at it, thinking of all those futures tumbling inside.

Because of that new hobby of mine, I have stopped seeing my friends so often. I also neglect my family, and find it difficult to make time for work. But I guess it’s OK. I stare at the box and I know it’s OK. I don’t even need to open it anymore. I know. My whole future is in this box.

The Anatomy Of Life

2015-12-16T00:00:00+01:00

It is said that life comes into being as a light and delicate object.

Such is a newborn’s life, light, faintly glowing over the top of the head, almost detached from the body, lovely prey of negligible value.

With the years, life grows, and slowly descends from the top of the head to the middle of the chest. Adolescence, which experts agree to be a most troubled and dangerous time, occurs as life travels behind the translucent skin of the neck, finding itself once again painfully close to the outside world.

People used to think that life stopped growing once it had settled inside the heart. But more recent measurements have shown that it keeps accumulating weight, sinking always deeper into the heart.

Who would know? People have done terrible things, ripping other people’s chests open, so they could get a glimpse at their own secrets. They snatched away what didn’t belong to them, measured everything, put labels on all the parts. They prepared potions full of life and sung songs of immortality.

People thought they could live forever. Whether they succeeded or not is, to this day, a matter of speculation.

Lost Keys

2015-12-07T00:00:00+01:00

Two little keys fell into my mailbox. They should be mine, yet they are not.

Now what?

The adventures of two lookalike keys looking for their true home:

Rule Number 1

keys are people, too

Rule Number 2

explain what's going on

Rule Number 3

get too clever with your first mailbox try and the adventure may slip by...

What key needs a story when it is home safely?

S Bahn

2015-11-25T00:00:00+01:00

Berlin S-Bahn trains. The esban everybody takes, because. Just because. The esban in which everybody waits, patiently, to be brought from anywhere to somewhere. One in a crowd of metropolitan crows. Amongst old and young people, hipsters and hippies, mommies and babies. Sometimes, amongst a Strange Man.

The Strange Man isn’t waiting to be somewhere. He picked his coach carefully and entered. Now he is here. Don’t talk to him. Don’t look at him. He has Issues. I start searching for my phone.

The Strange Man leaks colour. Green clothes, yellow hat. Four times he tries to spark a conversation with the unfortunate German old lady who holds a leash attached to an old dachshund. The woman stares at an imaginary dot far in front of her, very straight in her fluffy coat. Not moving, not blinking. She does not have Issues.

At last the Strange Man takes out a destroyed photograph. Someone he is looking for, it seems. A plastic wallet holds shreds of cheap photographic paper together. A Christmas picture. I had a good look. But when he approached me with the photograph, I stared at an imaginary dot far inside my phone.

The worst I could have seen on the picture? A little Anna Traussnig, sitting by the Christmas tree, smiling at her wrapped presents. A picture I had already seen, of someone I already knew. Are Strange Men looking for me? Issues are contagious. I am unique. I am wonderful. I do not have Issues.

A Perfect Wedding

2015-09-28T00:00:00+02:00

An angular fairytale

They said he was peculiar. He was a neat young man with beautiful hands and the eyes of a storm. They also said that he was afraid of corners.

While he always had a distaste for corners, edges and other line-swallowing monstrosities, it never used to be more than a minor annoyance back home. The corners might have been, well, a bit cornery and the edges a bit edgy – in the end, they were also his corners and his edges. He knew them.

But one day a war came, and just like that, his family was gone. In the empty house, all the corners started looking at him.

As soon as the war ended, he sold the family house for near to nothing, and moved to the biggest city in the country. Because even he knew there wasn’t anything you couldn’t find in a city large enough: cheap women, expensive beer and reasonably priced happiness for everyone.

He started by looking for a flat in the city center, where the people kindly smiled at him and nodded. No one here understood corners.

At last the night came. He walked and walked, until there was nothing but closed doors and empty streets. A perfect full moon was glowing low in the sky, yellow as oil. He sat down and stared at it. The moon stared back at him, and saw a handsome young man, with a soul like simmering milk. The moon had no beginning, no end, no corners. But she had many daughters.

One of the doors opened. A very fat woman was filling the frame. In fact, she wasn’t merely filling the frame, but the whole space around her. Every corner of it. She was very white and beautiful. She was smiling.

He realised that he was smiling too. So this was the place. No more corners. She kindly smiled again and nodded. He got up. In one straight mouvement, he walked to the door, took her hand, and brought it to his heart.

They said it was a perfect wedding.

Then, together, under the soft light of the obese moon, the newlyweds entered the house and were never seen again.