Select Page

NETWAYS Blog

stackconf online – Recap of Day 03

The final day of stackconf online has now come to a close. It has been a wonderful three days full of interesting talks, fun commentary and lots of learning!

Before I dive into the events of day 03, I want to shed some light on the evening event of day 02, which was all about socialising over long distances via the medium of video games:

For the evening event Christian and Bernd streamed Mario Kart 8 on the Nintendo Switch with an open party, so everyone could join in. We had a bunch of fun races and chats. Different people who were at the location took turns playing. 

Wonderful Morning at Day 03

Starting into day 03 with three cups of coffee, as is customary after the night of the evening event, we got some useful tips about integrating security into DevOps. Jose Ortega talked about integrating security into iteration and pipeline application development with containers and how to secure development environments on top of general best practices.

Ignat Korchagin followed up with his talk “Speeding up Linux disk encryption”. He started off with the basics on encryption, explaining the different kinds and their pros and cons and built up from there explaining more in depth how one should secure ones’ data with LUKS/dm-encrypt.

Next up was Pooja Purswani, with her talk “WebThings: Let’s Make Your Things Smarter“. Contrary to what the title would lead you to believe, she pays special attention to the privacy risks in the web and smart devices. Pooja offers a way out with the current decentralised IoT project from Mozilla which focuses on improving interoperability, privacy and security through standardization.

Containers, Accessibility and Bare Metal Automation

After a short and entertaining break about electric scooters and how docker changed the world, Michel Schildmeijer took over the wheel with his talk “Replace your Docker based Containers with Cri-o Kata Containers for better security”. He gives us insights into the technology of kata containers and how they enable you to have all of the advantages of docker containers, with the added benefits of a more secure environment.

After the lunch break, the ignite talks provided a nice lightweight way back into the conference with their short and informative nature.
The first one “Opensource in Advanced Research Computing, How Canada did it !” by Mohamed Elsakhawy gave us an insight into how Canada’s Advanced Research Computing organizations deal with open source software.
Followed by my talk titled “Flying Blind – Accessibility in our Tools” where I tried to raise some awareness for visually impaired individuals and how they interact with the web.

 

 

The first full length talk after the break was submitted by Rain Leander. The title “Leveraging Procedural Knowledge: From Riding a Bike to Bare Metal Automation” already gives a good idea over what the talk was about: The rate at which people in IT have to deal with new tools and ideas is absolutely insane. The viewers learnt about how to engage with new technologies in an easier manner, by looking at what kind of knowledge you take over from other technologies.

The longer break here was again filled with interesting discourse about a diverse range of topics like horses, twitter voice posts and eco friendliness that were discussed with the audience via chat.

Keycloak and Managed Kubernetes made it round

“Securing Infrastructure with Keycloak” by Rahul Bajaj was all about authentication and authorisation and identity preservation. Rahul explained the different bits and pieces of Single Sign On technologies and the different layers involved. He also demonstrated how he implemented the stack in the Foreman project.

Joerg Schad presented “Challenges in Building Multi-Cloud-Provider Platform with Managed Kubernetes”. A lot of cloud services emerged over time, and building your service cloud-agnostic has grown increasingly difficult. Today, most cloud providers support Kubernetes based platforms. The talk tackled some of the issues you could encounter and how to avoid them.

All in all, I would say that the stackconf online was a really nice conference and managed to capture the spirit of a NETWAYS event rather well, despite there not being a physical location. If you haven’t been able to attend the conference live yourself, you can check out the recordings on YouTube. They should be uploaded soon!

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Introduction to SVG: The Basics

Lately I’ve been spending a some time building SVGs.
When I told my colleagues about what I was doing they asked me to write a short guide about what exactly that is and what you can do with it.
Since I got those questions, i thought that might be interesting for others out there, so here goes nothing:

First of all: what is SVG?

Just like JPEG or PNG, SVG is an image format, which lets us display images or graphics on the web.
SVG stands for ‘Scalable Vector Graphics’ – You might have heard about vectors in a different context already, like maths class or physics maybe?
The concept is the same: there is a direction and a force which helps to describe a path.
This means, that those graphics do not consist of fixed pixel values, but instead they’re a set of directions for whoever renders it (usually the user agent / browser) to follow.

SVG is written in a format that resembles XML, which means you have your image in a human readable plaintext file!

Why does that make it special?

The fact, that the graphics are made up with vectors comes with a bunch of useful qualities:

  • Scalability: It doesn’t matter, if you make the image 30x30px or 3000x3000px, it will stay sharp
  • Responsiveness: Because of its’ scalability you can have it take up whatever space you need it to
  • Programmable: Since your image is basically a text file, you can modify it programmatically as well, which gives it a flexibility unmatched by other common options.
  • Performance: Since we’re not sending out a binary blob of pixels but a text file, there is next to no loading time for the images.

The most common use cases are logos, icons and icon fonts, animations and diagrams.

What does it look like?

This is a simple svg, which we will be building together over the course of this blogpost:

First we define a simple 20×20 “coordinate system”, where 0,0 is in the top left corner.
In the viewBox we define what part of the SVG we will see when it is rendered. Positive x values move to the right and positive y values move downwards.
<svg viewBox="0 0 20 20"></svg> For a better understanding of the slightly mind-fucky topic of the viewBox property, check this out.

 

To start of with we want to draw the head:
For that we just use a <rect> element to draw a rectangle that fills the entire space.
<rect class="body" width="20" height="20"></rect>

 

The eyes consist of two <circle> elements that we position with cx and cy and give them a radius r of 1 unit.
<circle class="eye" cx="5" cy="15" r="1"></circle>
<circle class="eye" cx="15" cy="15" r="1"></circle>

 

When you put everything together the code for it looks something like this:

<svg viewBox="0 0 20 20">
  <rect class="body" width="20" height="20"></rect>
  <circle class="eye" cx="5" cy="15" r="1"></circle>
  <circle class="eye" cx="15" cy="15" r="1"></circle>
</svg>

So far we’d only have a black box, but as you might have noticed, I also added the class attribute into the elements.
This is for styling the SVG via CSS.
It is also possible to style the elements within their tags, but using CSS is usually preferred, since it makes it possible to style images with user themes as well!
This is the CSS:

.eye {
fill: #444;
}

.body {
stroke-width: 2;
stroke: #444;
fill: #f15a22;
}

 

The drawn lines can be edited with stroke  and if the fill attribute changes the colour that fills up the shape:

You can find the pen here.

Drawing our own images

Combining shapes is all nice and cool, but there are a lot more you can do with SVGs – for example create your own shapes.
We can do this with the path element. For it to know what to draw it needs the d attribute in which we can describe the path of the element.

<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>

 

The d attribute has a syntax consisting of a few letters and a lot of numbers, that can look quite scary and unreadable at first, but when we break it down, it should look a lot clearer:
The letters are the commands and the numbers are their passing values.

 

M is the first command used. It’s the move command – so what it does is move the cursor to the position indicated by the numbers and is the starting point for our path.
M1,2 means it starts one unit to the right and two down.

 

The letters for the commands can either be uppercase to indicate absolute values or lowercase to indicate values that are relative to the last point we drew.
While m4,0 means “Move the cursor 4 units to the right”, M4,0 means move it to the position 4,0.

Basic commands for drawing lines

The next commands we want to look at describe straight lines:
L: any direction
H: horizontal
V: vertical
Z: last element for closing path

 

<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>
We’re starting at M1,2.
First line is to position 5,6, so 4 to the right and 4 down with L5,6.
Then a horizontal line to H15.
Another line that goes up and to the right with L19,2.
Down to y value 19 with V19.
All the way left to x position 1 with H1
Finally, we close the path with the Z command.

 

It’s entirely up to you if you want to draw with relative or absolute values, in a 20×20 grid those two would draw the same image:

<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>
<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>

Adding the path together with the circles from our first head and applying the CSS again the image looks like this:

You can find the pen here.

Getting those round corners

The little fox looks a little square still, so we want to edit it to give it some round cheeks.

For this we use the q command, which stands for ‘quadratic curve’.

The q command requires two points, the one around which the curve should be and the point to which the line will go.

We draw the ears like we have before but instead of going down to the 19,19 corner, we stop 2 units further up.

From the point 19,17 we use the command Q19,19 17,19.
This indicates, that we want to wrap around the 19,19 and end at the 17,19 point.

The d value for this fox looks like this:

d="M1,2 L5,6 H15 L19,2 V17 Q19,19 17,19 H3 Q1,19 1,17 Z"

You can find the pen here.

 

Next in the series is going to be a bit more in depth about the more advanced commands and we will extend on the foxes head to make it look like this:
So stay tuned!

If you thought this was fun, maybe you want join our development team, to learn more about the SVGs and the like?

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Flying blind – accessibility in the world wide web

Do you know how many visually impaired people there are out there?
I can tell you: There are roughly 188.5 million people with mild vision impairment, 1043 million have moderate to severe vision impairment, and 36 million people are blind (According to the world health organisation in 2018). When it comes to colour blindness there are approximately 300 million people affected – that’s almost as many people as the entire population of the USA! (According to the Colour Blind Awareness Community)

That’s a lot, isn’t it? And a lot of those people also use the web. Not everyone in the same way as most do though.

Have you ever used a screen reader? Or heard of the term at all? A screen reader is a tool used to have the content of your screen read out for you. They are usually used by people who have issues reading what’s presented – either because they cannot distinguish between what’s written and the background because of bad contrasts, because fonts that are too small or just because they can not read or see at all.
For anyone who is interested how it works there is a lot of material on youtube, like this video by the SLCC Universal Access channel. If you have the time you should also try it out yourself, there are a lot of free tools out in the www.

In order to make this all possible there are guidelines provided by the w3, which cover:

  • Web Content Accessibility Guidelines (WCAG) – how to make web content accessible
  • Authoring Tool Accessibility Guidelines (ATAG) – make authoring tools accessible
  • User Agent Accessibility Guidelines (UAAG) – make user agents accessible
  • Accessible Rich Internet Applications Suite (ARIA) – make web content and web applications accessible

For all of the (web) developers reading this, those are definitely worth a read! Sticking to those standards makes the web more accessible for everyone, and that’s what everyone should strive for, right?

For people who have difficulties with contrasts, there are standards set by the w3 and also high-contrast ‘themes’ available for some tools.

People affected by some form of colour vision deficiency there are colour blind variations in some tools – often times they are just being overlooked though. I have some pictures for you, that aim to visualise the most common kinds of colour vision:

colours with different simulated vision impairments

I used ‘Color Oracle’ for the simulated colours.

There is also a more detailed blogpost on icinga.com about our new ‘colour blind’ theme in Icinga Web 2.

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Digging up hidden information for a scavenge hunt?

Since today is Ascension Day – which is a public holiday here in Germany – I figured, why not write a post that is also relevant to our readers who have the day off?

So what could be relevant and fun?
Most of the people here who read this blog probably work in tech. And a trait, that I found that a lot of people working in tech have, is enjoying solving puzzles – be it on the computer or in the outside world. I got introduced into something that appeals to me in exactly that way: Geocaching – Mystery caches (yes, yes, I know, geocaching is sooooo 2015 – but solving puzzles is always going to be cool!)

Map of Nuremberg with about 200 caches marked on it

Map of Nuremberg with caches marked on it – each icon is a hidden treasure

A little explanation what that even is (stolen from Wikipedia):
Geocaching is an outdoor recreational activity, in which participants use a GPS receiver or mobile device and other navigational techniques to hide and seek containers, called “geocaches” or “caches”, at specific locations marked by coordinates all over the world.
Mystery/puzzle caches require one to discover information or solve a puzzle to find the cache. Some mystery caches provide a false set of coordinates with a puzzle that must be solved to determine the final cache location. In other cases, the given location is accurate, but the name of the location or other features are themselves a puzzle leading to the final cache. Alternatively, additional information is necessary to complete the find, such as a padlock combination to access the cache.

 

text: Ugh? Ugh. Ugh? Ugh. Ugh? Ugh. Ugh? Ugh. Ugh? Ugh. Ugh! Ugh! Ugh? Ugh! Ugh. Ugh? Ugh! Ugh! Ugh! Ugh! Ugh! Ugh. Ugh. Ugh? Ugh! Ugh! Ugh! Ugh! Ugh! Ugh! Ugh! Ugh. Ugh. Ugh? Ugh. Ugh. Ugh. Ugh. Ugh! Ugh. Ugh. Ugh? Ugh. Ugh. Ugh. Ugh. Ugh. Ugh. Ugh! Ugh. Ugh! Ugh! Ugh! Ugh! Ugh!

Or about 100 lines that look something like this

So what does that have to do with the tech world?
Well, it’s the way people hide the coordinates.

 

The difficulty of the riddle and the reachability of the box is measured with a scale from 1 – 5 stars. If you’re looking for a real challenge in solving riddles, you want to go for caches with the rating D3 – D5 (D stands for difficulty here).

Sometimes you just get a cryptic cache description with pretty much only “[Coordinates]: 0e9bfe8f349ed4b75d480743d1ab55e6e83c8176” as a hint

Others just consist of an image. Images can hold a lot of information – if you know where to look.
Steganography – the practice of concealing a file, message, image, or video within another file, message, image, or video – is also often used to hide coordinates from plain view!

I really enjoy geocaching because it’s a nicely balanced pastime. I get to use both my brain and my legs! (A lot of the caches are also wheelchair accessible too though)
Sometimes you even get to see some really cool new places you would have never gone to!

If this sounds like something you could enjoy – just check your area at geocaching.com or the open source alternative opencaching.de where you can select your preferred language and country in the header. Both are using OpenStreetMap for their maps.

My preferred app for caching is c:geo which is an open source app for Android – check out their project on github.

Look for the little  '?' icon  icons for mystery caches

 

Caches I hinted in my post:
1: Password Swordfish
2: Ugh! Ugh?
3: Nano
4: The series: How Do I Solve These #@&%$ Puzzles?!!

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Und, was gibts heute zu Mittag?

Kurz vor 10:00 an der Kaffeemaschine, die Leute beginnen langsam ein kleines Hüngerchen zu verspüren und es wird diskutiert was denn heute in den Lunchshop kommt.
… Lunchshop?

Wir hier bei Netways haben ein cooles System entwickelt, das es für uns erleichtert zusammen Essen zu bestellen.
Wir haben nämlich als eher mittelgroßes Unternehmen nicht den Luxus einer Kantine wie so manch andere.
Stattdessen haben wir uns selbst geholfen und ein kleines Tool zusammengebastelt, das ich heute vorstellen möchte:

Der Lunchshop!

Grundsätzlich handelt es sich dabei um ein Webinterface, das helfen soll die Arbeitsabläufe beim Essen bestellen zu automatisiere.
Die “Händler” können einen Laden anbieten, bei dem sie bestellen wollen und die restlichen Mitarbeitenden können sich dann in die Bestellung einklinken.
Das spart Lieferkosten und schont die Umwelt (zumindest ein bisschen mehr als wenn ein Jeder für sich bestellt).
Und wir faulen IT-ler müssen uns nicht irgendwo hin bewegen um an Futter zu kommen!

Ursprünglich entwickelt und administriert von einem unserer ehemaligen Kollegen wird der Shop nun von einem Grüppchen von Freiwilligen weiter geführt.
Ich selbst bin einer der Admins und Händler. Ich versuche ein bis zwei mal die Woche einen Laden aus unserer Liste in den anzubieten, wir haben Pizza, Fitness-Food, Pasta, Asiatisch, Burger, Mexikanisch, Indisch und vieles mehr!

Die Bank!

Alle Geldbewegungen die durch das gemeinsame Bestellen entstehen sind automatisiert und laufen über unser internes Banksystem ab.
Die im System registrierten haben ein eigenes Konto, auf das sie einzahlen, von dem sie auszahlen und mit dem sie (gesetzt sie haben genug guthaben) auch bestellen können.
Das Geld wird wird von allen Bestellern automatisch abgezogen und dem Händler gut geschrieben. Dieser kann dann entweder das Geld auszahlen um damit für die Bestellung zu bezahlen, oder es als Guthaben behalten.

Der Bestellablauf!

Die App zum Anfassen!

Natürlich gibts das ganze Open Source, zum anschauen, forken und selbst verwenden!
https://github.com/gunnarbeutner/shop-app

 

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Veranstaltungen

Tue 20

Icinga 2 Advanced Training | Online

April 20 @ 09:00 - April 22 @ 17:00
Tue 20

InfluxDB & Grafana | Online

April 20 @ 09:00 - April 21 @ 17:00
Tue 27

Elastic Stack Training | Online

April 27 @ 09:00 - April 29 @ 17:00
Tue 27

Graylog Training | Online

April 27 @ 09:00 - April 28 @ 17:00
May 04

GitLab Fundamentals Training | Online

May 4 @ 09:00 - May 5 @ 17:00