This month I've learned - December

Helm for kubernetes

The Helm logo The Helm logo

We use kubernetes clusters to deploy and run services, but until now it was unknown for me, how exactly these services are set up. Imagine the kubernetes building blocks:

Helm aims to be the package manager for kubernetes clusters. These packages are called Charts, where you can define which docker images have to be used in your services later, exact version of images and configuration data.

The configuration also contains the keys for secrets where the data itself will be provided by the k8s cluster’s secret store. (Be sure to avoid storing these in code, as I’ve mentioned this a few times in my introductionary DevOps talk)

I’m pretty sure all these could be configured using kubectl, but that would be lots of commands, probably redundant, error-prone and time-consuming.

But with Helm Charts, you can define your service in a kube cluster pretty easy - after you get to know what goes where. We should not forget, these charts are versioned, so you can roll back if something went wrong.

Structure of Helm Charts

A Chart is a collection of files in a directory, the name of this directory is the name of the Chart. Here is a brief description of these

So far I’ve met with simple charts, with a few Templates and Values. Having several value files - staging and production for example - was enough for our needs, and we could version and deploy our services using those. Here is the complete documentation on Chart contents.

CLI toolset

Before using the helm CLI you have to connect to a kubernetes cluster. Helm will use the cluster information from your ~/.kube/config file. The basic commands are:

These are really the most essential commands, there are many other commands, you can check the out at the Helm Docs

Ligatures

While working on a feature, that relies heavily on the contenteditable property of the DOM, this happened:

Since I know the work of @aemkei, and the dark magic of zero-width Unicode characters, I prepared for the worst. Tried to hunt down any, accidentally created ghost character, but there were none. It was really two characters, handled as somewhat one, but the caret did not move while stepping over them. After a short googling the word “Ligature” burned in my brain!

In writing and typography, a ligature occurs where two or more graphemes or letters are joined as a single glyph

In our case - which is actually a very common one - the letters f and i melted together. The weird thing here is that the browser treats these as two separate characters, it does not move the caret visually, which is really confusing UX-wise - imagine use cases like precise-selecting text.

But it can be turned off, using the powers of CSS!


        
.no-ligature {
    font-variant-ligatures: none;
}
    
examples for font-variant-ligatures, font-variant-numeric and font-variant-alternates examples for font-variant-ligatures, font-variant-numeric and font-variant-alternates

The best place to learn about these is the W3 spec itself and it turned out, it’s a long slippery way down the rabbit hole.

There’s a lot of these settings and features, some really interesting:

Important: these are based on OpenType features, so they only work with OpenType feature enabled web fonts. Try these features on Google Fonts: Google Font OpenType Feature Preview

What’s more fun, is that ligatures power many of the emojis, combining them in a various way, for example, flags:

Flag emoji like 🇯🇵 are ligatures of special country code glyphs called “Regional Indicators”. There are 26 of them, one for each letter of the Latin alphabet, and two combine to make a flag. For instance, there is no Unicode number for the Japanese flag emoji 🇯🇵, it is made up of two indicators: REGIONAL INDICATOR SYMBOL LETTER J + REGIONAL INDICATOR SYMBOL LETTER P.

These are combined together using a Unicode “zero-width joiner” (U+200D in HTML it’s ‍). If there is a connected form for two characters, putting this one in between them, causes them to appear as their connected variant. Lots of new emoji are created, using such ZWJ’s, here is the complete list of them on Unicode.org

Trigonometry & CSS variables

For this site, I wanted to play with a skewed header and footer background, but leaving these slanted layers there just being static elements looked boring. So why not add some animation?

The right-angled triangles, on the top and the bottom of the skewed rectangle The right-angled triangles, on the top and the bottom of the skewed rectangle

To animate these leaning layers, I have to update the css skew property, by a relatively small degree. If I look at this shape of a skewed background rectangle, the upper / or lower part is a simple right-angled triangle. The value I need, is the angle between it’s adjacent and hypotenuse, that has the degree value to skew the background with.

Sine, cosine and tangent basics. Sine, cosine and tangent basics.
Image source

Luckily, the right-angled triangle has some basic rules in trigonometry.

The Opposite and the Adjacent divided gives me the tangent of the skew angle. All I need is two values:

Refresh your knowledge on trigonometry, it can be really useful in usecases like mine!

Using requestAnimationFrame on scrolling I can calculate the height of the Opposite value until a maximum pixels, and during this calculation I can set the skew angle, so as the visitor scrolls down, it starts to skew the header or the footer.

Setting a CSS property from JS can be painful for rendering performance. Instead, use CSS variables - or CSS Custom Properties - where the value of a CSS property is bound to a CSS variable, just update the value of the variable from JS, and let the browser sort out the rest.


        
header::after {
    transform: skewY(var(--headerSkew));
}
    

        
headerElement.style.setProperty(`--headerSkew`, getHeaderSkew() + 'deg');
    

Combining this technique with FLIP, enables you to create not just fancy decorative animations, but meaningful and contextual transitions for any UI.