Tinkering Tobias

Using an Eleventy starter

2020-08-19T00:00:00Z

For a long time I've wanted a blog that doesn't require any form of maintenance hosting-wise. I hate hosting stuff. Spinning up a VPS or something similar just to get a blog started is just not worth it. And it isn't free. I scrolled through some options and found Eleventy (11ty) as an alternative.

The concept is that it supports a ton of template languages etc. which means a couple of things:

You are the direct owner of the content. (Hinting a bit at Medium here).
It is easy to transition to if you used anything other previously.
It is future proof.

Using a starter#

I need to be honest with you - the documentation is way too technical when trying to get started with Eleventy. That's why I used a starter.

I chose a beautiful starter made by Stephanie Eckles, called 11ty-netlify-jumpstart. It has a very good "getting started" section.

Making it my own#

This starter is more of a static website type of deal, which is not really what I wanted. I was missing dates for the posts (and calling them posts).

I extended the layout for the regular page by just adding a date at the top, creating a new page type called post. Pretty straight forward.

---
layout: page.njk
---

Voíla! That is it. I might do some minor changes further down the line, but this is good for now.

How I was hired at Grafana

2020-08-20T00:00:00Z

For the past couple of years I have spent my summers working at Grafana as a Software Engineer. The people there are amazing, and I feel like it is pure luck that I ended up there. I thought I'd tell the story about how I ended up there.

My situation#

Back in the spring of 2018 I was told how much I was going to pay in taxes. It was quite a high amount for someone in their early 20's. I needed to get a job for the summer so I wouldn't have to walk around the coming year worrying about the bottom line.

There was a problem. I didn't think about this until May, when applications for summer jobs usually close around february (for the big industrial companies). It was going to be a bit of a challenge.

I had about 14 months of prior experience with full time front end development. I had written some stuff with Ember and learned React/Redux entirely on the job. I thought "Someone probably needs someone who can write React".

The opportunity#

For a couple of weeks I scoured the web for jobs to apply to. I sent an application to someone I had met at a networking event in Luleå. My friend Emil Tullstedt (Currently at Grafana), who worked at Tink at the time, told me to send one application there as well.

While browsing LinkedIn semi-casually, I saw that Emil had like a post by someone named Carl Berquist that said something along the lines of:

We're looking for a front end web developer

I messaged Carl and asked if they were looking for summer interns. He came back to me the next day and we scheduled the interview a couple of days later.

The interview#

This was a time before Grafana had some kind of HR or people working specifically with hiring. I think I only had one interview for that reason. Or maybe it was because a summer intern wasn't that much of a risky investment.

Three people interviewed me: Daniel Lee, Carl Bergquist and Leonard Gram. We talked a little bit about my previous experience and what I studied.

They told me my initial work would be

Converting Karma tests to Jest
Converting Angular to React

There was a problem though. I didn't know Karma, Jest or Angular (I had only fiddled with it a little bit). But it didn't seem to worry them.

A couple of days later I got the contract, which pretty much only stated my start date and my salary. Let's just say that it isn't the case any more.

I think the time from initial contact to signed contract was about a week. Pretty impressive.

After the first summer#

After the first summer I had successfully converted tests and removed Karma from the code base. Overall the people at Grafana seemed pleasantly surprised, which was new to me.

The thoughtful people at Grafana#

I have had a couple of conversations with Daniel, and he is always good at giving some input so it is possible to see the broader picture. He could probably one day end up being one of those managment people who post smart quotes on Twitter that makes everybody say "Wow, so true" or "How insightful!".

I asked Daniel at the end of the first summer, since taking me in was quite a bet: "What did you think when you hired me?"

Worst case scenario: we would have had one more person to eat lunch with.

I should probably print that on a T-shirt

Finally, I would like to share some wisdom Daniel shared with me:

In case you would happen to work somewhere else, remember that good people tend to stick together

Find the good people and stick around!

Giving great compliments

2020-08-31T00:00:00Z

I remember a compliment I received a couple of years ago. A friend, who happened to be a perfectionist said:

You're like a painting that hangs straight

It is one of the best compliments I have ever received. I started thinking; "How can I make other people feel the same way?". Here are some of the conclusions I've made during the last couple of years.

Be genuine#

Giving compliments just for the sake of it works to some extent. Let's face it; not many people are going to have a heartfelt moment by them getting to know how good looking their jacket is, It is a bit more of a courtesy thing, which is not the thing you are going for. You want to play music on their heart.

How do you get there, though? Think about the person and in what ways they have positively affected you. It is a little bit like a gratitude exercise. Then you notice that it is usually about something they do, or something related to their personality.

The key components#

I have tried to break down a compliment into two components. It is inspired by the components in Nonviolent Communication.

Behaviour/trait#

Be specific with what is positive about them. Some time you need to zoom in a bit.

Feeling#

What does it make you feel? Warm? Good? Thankful? It doesn't have to be very complicated - it just has to be true!

Your perspective#

This part is about communicating the difference that the feeling made. It could be about how you had a really shitty morning and that it all went away just because they said "Hi!" and gave you a very friendly smile.

This part isn't required, but rather a way to reinforce the compliment by underlining how they made your life less shitty.

Example#

The way I see you actively listen to people makes me feel so hopeful in these uncertain times

Active listening
Hopefullness
Express some kind of general worry about the state of things

Become better at receiving compliments#

I used to have a hard time receiving compliments. I just brushed them off as it was nothing. That behaviour doesn't really encourage people to give you compliments.

At the very least; stand up straight, look them in the eyes and say "Thank you, I appreciate it!".

In the future...#

...make some paintings hang straight! Practice giving compliments to people as soon as you notice something positive they do.

Have a good one! /Tobias

Change your coding font to this. You can't believe what happens next!

2021-02-16T00:00:00Z

The clickbait title of this post entirely reflects its content. Just sayin'.

Perhaps you haven't spent much time on deciding a good coding font. Maybe you did a quick Google search and ended up with Fira Code. It has ligatures after all. But there is one question you need to ask yourself: Is this you?

Maybe you're just like me in the sense that I am like nobody else. You're unique. Why would you want to use a font that everybody else uses? Be a wildcard, live on the edge!

You're unique

My initial approach was to use Comic Sans to code with, but as some of you may know, it isn't monospaced or open and free (Couldn't figure out a good way to get it on Ubuntu)^[1]. So I went with the open modern Comic Neue.

It isn't monospaced, but it gets the job done. It completely lacks ligatures, something that I tried to fix with horrendous results. I would recommend using the bold version for code.

I still wasn't fully satisfied. I couldn't use Comic Neue in my VSCode terminal since it wasn't monospace. It just didn't cut it. I needed something monospaced, so that next time someone looks at my insanely skilled commands they will say "Wow".

It just didn't cut it

I went on a far journey throughout the internet. For many days and nights I searched, finding nothing. Until one day when it looked like the darkest, I saw a glimpse of light. Drawing closer I could sense the magnificance, subtleness and softness of it. I had found Comic Shanns. I had finally found what I was looking for. Even though it lacks ligatures, it makes up for it with how beautiful it looks in the terminal.

Have a quick look at it!! Your life will change for the better! I promise!

Yours truly, Tobias Skarhed

After writing this, Emil Tullstedt informed me that I can use apt install ttf-mscorefonts-installer ↩︎

How to create a basic Chrome extension

2021-03-07T00:00:00Z

The Chrome extension documentation is pretty extensive; there is a lot you can do with extensions. It is possible to run background scripts via web workers, interact with the Chrome API directly and call your own API's if that's what you want.

That's not what I wanted. I wanted:

Update the styles of a specific website
Read and modify the DOM

In this article I will use an extension I wrote that inserts a search link on a movie's IMDb page, so you can figure where it is possible to buy or stream it.

The Chrome Extension manifest#

The manifest describes what the extension is about and what permission are needed. It also includes metadata such as name, description, screenshots and icons. We won't be focusing on the metadata. To get the basics of the manifest, see this part of Chrome Extension documentation.

The goal here is to insert our own script and our own CSS file into a webpage - this case being a n IMDb movie page. For this we are going to use content scripts, that the Chrome Extension documentation names in a very jargonny way as "inject with static declarations".

We want to inject the files in the same directory as our manifest called contentScript.js and style.css.

{
   "name": "Where to watch - Playpilot/IMDb",
   ... 
   "content_scripts": [
        {
            "matches": ["https://www.imdb.com/title/*"],
            "js": ["contentScript.js"],
            "css": ["styles.css"]
        }
    ],
    ...
}

This is an excerpt from my extension manifest.

This just tells us what CSS and Javascript files we want to load into what sites, matches. Notice that all of these are arrays, which means you can load multiple scripts and stylesheets onto multiplite sites.

The key here, which was my point of failure, is the matches URLs. If you files don't load it is most likely due to that. In my case I didn't add the www for the URL. The wildcard * just tells us to match all URLs that begins with everything to the left.

1,2,3, we're done! Now you just need to write an awesome script and some beautiful styles!

Have a good one! -Tobias

Grafana alerting notifications in Mattermost

2022-08-03T00:00:00Z

Grafana is a tool for monitoring whatever you want. Sometimes when the stuff you monitor behaves weirdly or goes all haywire, you want a notification. You have set up your Grafana alert and a notification policy that sends an email to your grandmother.

That Ol' Gran gets her information is great, but you are looking for something more modern that fits the 2020's lifestyle. You want something that is more like a frappucino rather than a black coffee with milk.

Your team uses Mattermost, which is an open source alternative to Slack with the option to self-host. This is the modern way to communicate. Here you already have some bots informing you about your CI/CD pipelines, curing your loneliness and one that pings you when Wheatley logs in. So adding another shouldn't be that hard.

You think to yourself:

Mattermost and Slack looks the same and acts the same, so there must be a Grafana contact point option for Mattermost too

In your quest to the solution you do a quick Google search. Nothing. You feel the awful dread of impending doom creeping up on you, just like someone from Gen Z. On the far horizon - the second page of Google - you find this blog post shining at you like a sunrise.

Here is how you do it:

Setting up Mattermost webhook#

In the top left corner of your Mattermost, you can find a menu button. Click it. In the menu you find an option called Integrations.

Here you want to go to Create incoming webhook. This will create the endpoint that Grafana will use. Select which channel you want the bot to write its messages in.

In the form, there are two very important options, which should be filled like this:


Username	Grot (grafanabot)
Profile Picture	https://avatars.githubusercontent.com/u/43478413?v=4

This is brings the fierce dinosaur Grot the Grafanabot to life!

When you are done with the settings, save it and copy the URL that has been generated for you.

Setting up Grafana contact point#

In Grafana you want to configure a contact point. In the menu to the left hover the bell icon (Alerting) and select contact points. Here you want to click "New contact point".

Here comes the sneaky part

Under "Contact point type" select "Slack". 🙀 We fooled the system people!

Give the contact point a mandatory name and paste the URL you copied from the Mattermost webhook into "Webhook URL". You can configure the rest if you want, but it is not necessary and will override the settings you have made in Mattermost.

You can now freely use your contact point under "Notification policies" and Grot the Grafanabot will pop up in a channel near you with some news!

And granny will still get her email, of course.

/Tobias

The healing power of running

2022-10-23T00:00:00Z

My left hip was in pain. The constant upphill struggle had but a lot of tension on my thigh. I was glad that I had manage to reach the highest point of the race. Four days previously I had been in bed with a cold, too tired to get up to do the dishes. It had taken its toll during the race. My pulse was way higher higher than usually, and after 12km my body started stopped working properly if the pulse was higher than 170bpm. With the help of my friends, I prevailed. I finished my first trail run race, 24km with 900m altitude gain, with wet weather conditions in the Jura mountains.

I hadn't been running actively for three years, since I had shin splints. That was at a time where I felt ambitious, so I decided to aim at running a 10k in 40 minutes or under. The training schedule was very intense. I went from running 3 times per week at a reasonably comfortable intensity, to running 5-6 times per week with some very intense sessions. I would almost always run with sore muscles from the weekly leg workout. It paid off though, as after two months I started beating my 10k PR every week. It wasn't even my intention of doing it during those runs, since they were always interval runs. I looked at the statistics from Garmin, and it said that during October 2018, I logged 120km. Apparently this was at the top 1% of Garmin users. I recorded my journey through a set of video logs. I felt like a machine.

Then came the shin splints. I did not have the tools to deal with it. I took a month off from running, to see if it would improve. It did not. In fact, my mental health worsened. Since starting university I had consistently been running three times per week, something which worked as a great protection against stress and studying performance. Running had been a way for me to manage whatever life decided to throw at me.

Then came 2019. Probably the worst year of my life. Some things happened which threw me into a deep depression. I basically wouldn't leave bed for 5 months.

The job I had during that summer was very helpful to me. My main task wasn't very mentally straining, which meat I could show up to work wihtout being fully mentally present, and still deliver value. More than that, I managed to have an 8km commute, which took me a month to actually make use of. I bought an old road bike to use for commuting every day. 16km per weekday for a month really brought me out of the darkness.

However, when I returned to university, I struggled to keep up with the frequency. And I didn't have my bike there either. Most of the studying I did there was very half-assed, and I did several smaller attempts at getting back into running. I went to a physiotherapist, who gave me exercises to do every day. I never managed to fully commit, because of the great catch-22 of bad mental health. I can't start doing the things that help me do the thing I want, because I can't do the thing I want. Supposedly, this is why cognitive behavioural therapy works, even though it is more focused on initially doing things that used to make you happy.

University wass a horrible psychosocial environment. For probably 1,5 years I walked to the lectures every day and said to myself "it will be over soon". The darkness of the arctic certainly did not help.

I managed the finish the required courses, and moved to the Geneva area for a studendship at CERN. This was the change of environment I needed. Leaving my apartment, I would see the Jura mountains to the north every day. I committed to running again, slowly increasing intensity as the physiotherapist had recommended. For a couple of months I mostly ran 2km per week. I slightly increased that at some point.

One of my colleagues found UTMJ - a mountain marathon with a set of distances, 24km the shortest and the longest an ultra distance of something like 170km. We decided to sign up for the shortest distance. I saw this as my opportunity get back to actively training. My goal was to finish it, even if I had to walk the entire way. I wanted to come out on the other side being able to exercise three times per week. There was only one issues: we had one month to prepare.

My colleague set up an initial training schedule, and I thought it was way too intense. I did some of the activisties, and from what you can expect with a great increase in training, things started hurting. My right knee to be exact. So I stopped doing things for a couple of days. This time it was different though. I wouldn't let it beat me. I Googled all methods I could use to treat it; specific exercises, stretches, support taping and anti-inflammatory cream. To my surprise, it worked. During the race my knee was taped, and I felt nothing from it.

Me being older and heavier, probably means that I will feel pain more times. I am currently feeling something in my hip, from a very intense leg workout a little while ago. I have a different mindset this time around. Reach out for professional help if you can't manage to Google the answers, and don't let the pain destroy your momentum. Many times it helps with just changing up the routine and exercises.

Hopefully this has been helpful to someone! Now I am preparing the BAMM, arctic mountain marathon next year!

/Tobias

SSG framework for displaying music scores

2023-04-10T00:00:00Z

Table of contents:

Background#

At university I used to be a part of a classical male choir, which is traditional for Swedish universities, dating back to the early 1800s. Our choir is anything but traditional, but that subject may be covered at a later date ;)

A lot of the repertoire in this genre is rather old, which makes it a prt of the public domain. A lot of famous composers have songs that still to this day are common to sing during Swedish traditional holidays. Prince Gustaf, Otto Lindblad and Hugo Alfvén are some of the most famous of these composers.

A big part of this genre, which is tightly connected to universities, is "snapsvisor"; drinking songs commonly sung before taking a schnapps.

Joakim Sandström, a previous conductor of my choir Snapsakademien, started a project where he wrote a lot of the classical songs in Lilypond. This is a programming language that enables easy generation of music scores, usually in the form of PDFs. The initial purpose for this was to generate PDFs to combine them into a song book that could be used during a semester.

Lilypond provide possibilities for output aswell. MIDI-files, a music file format known for producing simple music, can be generated, so the melody can be listened to while practicing. This is perfect especially for people like me who have a hard time reading notes!

The library has grown enough to be useful beyond a single choir, so these scores can really be useful to publish alognside the MIDI-files.

Requirements#

Joakim Sandström is a happy volunteer that write these scores in his spare time. He has good knowledge of Lilypond, and even though he may understand the technical implementations of publishing the scores to the web, he shouldn't need to worry about it. Volunteer efforts are super important, and we should do anything in our power to not make any of these tasks more difficult or complex.

We can do this assumption that the knowledge should extend to the Lilypond output files. This means that we can assume the following:

Song information is known, such as title, composer or artist.
Lilypond output file name is known
Output file location is known

Furthermore, in order to make a clear connection to the structure of the website, it should preferably reflect the structure of the repository.

These are some other features we might want to consider:

Easy way to list all the available songs
Simple way to implement a search feature
Categories or tags to group songs

Alternatives#

Scripting with templating language
eleventy (11ty)
Astro

Defining metadata#

All of these need some kind of input data, as it is not trivial to extract data from Lilypond files. The choice of defining metadata highly depends on which SSG solution is chosen. Some alternatives for defining data could be:

JSON files

{
  "composer": "Otto Lindblad",
  "title": "Längtan till landet",
  "categories": ["spring", "1800s"],
  "svgFiles": ["./page-1.svg", "./page-2.svg"],
  "midiFiles": ["./all.midi", "./t1.midi", "./t2.midi", "./b1.midi", "./b2.midi"]
}

Frontmatter YAML in Markdown files

---
composer: "Otto Lindblad"
title: "Längtan till landet"
categories: ["spring", "1800s"]
svgFiles: ["./page-1.svg", "./page-2.svg"]
midiFiles:
  - "./all.midi"
  - "./t1.midi"
  - "./t2.midi"
  - "./b1.midi"
  - "./b2.midi"
---

Scripting with templating language#

The actual templating languiage does not matter much, as long a s it takes some kind of object and processes it. A personal preference would be Handlebars or Mustache.

For this, a script has to be written to traverse the folder structure and render the HTML files. This could be done with something like a bash script or a Node.js script.

The good thing with this approach is the flexibility. However, as soon as we look at thge requirements we listed previosuly, the complexity quickly increases. If we use this approach, then we basically need to write our own Static Site Generator.

Withoout proper though into the initial arcfhitecture, handling collections of songs kmight be difficult. Furthermore, search provides more complexity.

If we consider the fact that this project is on a volunteer basis, we want as little code as possible to maintain. With the features we require, the codebase may quickly increase uin size.

Eleventy (11ty)#

11ty offers a wide variety of templating languages. It also has something called a "data cascade" which defines the different levels from where it may get data.

The data may be defined in a YAML frontmatter, a use case which fits really well for writing blog posts. In the frontmatter things like title, date and description may be added, whereas in the actual body of the document, you can write Markdown. Neat!

In our case we do not have any need to write Markdown, so we can use JSON files instead, just containing the metadata. In a folder with songs in JSON format, an index template is applied to those and the JSONs in subfolders.

All scripting and shortcodes need to be written in the 11ty config. It is possible to extend it quite a lot, but the bare bones work really well without any scripting. The only issue here is that there needs to be consistent folder structure and naming conventions.

Astro#

Astro is one among many SSGs with supercharged templating, in this case powered by Javascript. In this case, YAML frontmatter is the only way to go. A downside is also that the layout for a spoecific post needs to be defined in each file, which breaks the promise that the Liliypond writer does nto need to know anything about the implementation.