HoverBaum

Ein Baum und seine Abenteuer

Go based proxies for developing mobile websites on corporate WiFis

You might know this scenario:

We would really love to debug the web-app on an actual phone but they way our corporations WiFi is set up just won’t allow it…

When networks become a show stopped for development.

...read more

Dockerizing modern web apps

Most websites these days are Single Page Applications (SPA for short) where a single entry file handles all routes that a user might visit. Swept up in the ongoing trend of hosting in the cloud you might find yourself needing to “dockerize” your SPA. That is to say wrap it inside a Docker image and run it as a container.

These days everything is shipped in containers, even software.

In this post we will explore how we can get that done. We are going to build a simple SPA that just tells the user which route of our website they are currently visiting. That means you should be able to visit not only / but also any route you might think of, such as /unicorn or /rainbow. This SPA will be a super simple and hand made one but you can see it as representative for any complex React, Angular or Vue app you might want to deploy. Finally we are going to build our SPA into a Docker image and deploy that as a container.

We will run through all the basics of what we are doing. So whether you are seasoned with Docker and just can’t get that SPA to run on your cluster or you are a great web developer tasked to do this Docker thing, this post is for you.

...read more

Polling using RxJS

As observables are gaining more and more popularity in JavaScript we are looking to accomplish our everyday tasks using them and evaluating whether they are really worth all the hype. One task you might find yourself doing is polling the backend to know whether a longer running task has completed.

We will walk through an example of such a scenario and implement a solution using RxJS. On our way we will learn some basic operators for RxJS, and a few techniques as well as how to avoid a pitfall or two. At the end I will present a real-world example to show you how to implement what we learned in a specific scenario.

A real life stream in action.

You should bring a basic understanding of Streams / Observables as well as solid foundations in JavaScript to enjoy this post. For the rest of this post I will treat Stream and Observable as interchangeable words for the same thing. While we will cover a lot of basic things they will mostly be RxJS specifics and less the basics about Streams. Should you be looking for a general introduction consider the gist title “The introduction to Reactive Programming you’ve been missing”.

...read more

How I fell in love with an API-first CMS

The CMS (Content Management System) was one of the first building blocks of the content driven web. The CMS marked the move away from hardcoded HTML pages, and towards our modern web in which everyone has become a content creator. They are great for businesses because the competence of building websites and managing content could not only be split in theory, but also in practice. With a CMS, we can update our website on the fly — so there is really no justification for not using a CMS.

In the world of CMSs, we as developers are tasked to create a flexible, extensible and usable systems that not only conveys meaning to readers, but also helps content managers getting their job done. In practice, a big part of this work is displaying the content that is managed through the CMS on a multitude of platforms — from desktops and phones to TVs.

Falling in love - Image by Contentful

...read more

Contentful import to a different locale

After my recent undertaking to migrate a blog from Wordpress to Contentful I was also faced with the challenge to import content to a Space that had a different locale than the Space it was exported from. This came about after we setup a “base” space for our Product that is supposed to be rolled out in multiple countries.

Once again I wanted to use the Contentful-import tool to get this job done. However soon I kept seeing:

1
2
✖ Checking if destination space already has any content and retrieving it
Default locale for destination space: es-ES

...read more

Wordpress to Contentful migration

Contentful is one of the most prominent headless CMSs at the moment. As such it provides you all the content management capabilities of traditional tools like WordPress while decoupling the delivery of this content via an API that can be used to retrieve content.

Headless CMS are quickly turning from the new kid on the block intro everyone’s favourite. And I totally understand why: it makes thinking about building a frontend so much easier, for once you actually know what is happening and we have great separation of concerns. For me as a webdev this is great stuff!

But it is also work, after all these old and dusty WordPress sites need to be migrated to those new an shiny, Contentful powered React based single page applications ✨ I have been building for clients. Luckily Contentful provides a range of tools to make this easier for. While the contentful-export and contentful-import can help you migrate Content Models and Entries from space to space the Content Management API helps you to manage your content. Thus today, let us take a look at how you can utilize it to migrate a blog from Wordpress to Contentful.

Lets go on a journey.

...read more

Deploy a hexo blog from Github using Travis

Straightening a lot of things out at the moment I got stuck with my blog.

This should be about the fourth blog I have run in my life. And so far the longest standing one. Mainly thanks to my stay in China. And it has gone through multiple stops so far.

First it was a wordpress powered blog hosted on my webspace at der-grüne-baum.net. That rapidly turned into a maintenance nightmare of “Wordpress needs a security update”. So in September of 2015 I took a look around for alternatives and found Hexo. A Node based static blog generator. Technology wise totally my thing and static means pure HTML files without so much security stuff going on. So I switched to Hexo at first uploading by hand via FTP.
Last year while I stayed in China the manual upload didn’t work so great anymore. The connection just didn’t take it. So I moved my blog to GitLab. They had native support for Hexo based sites. I never managed to get the domain moved to there however. So now in 2017 I set out to go for the new domain hoverbaum.net and have it there.

I wanted to still use Git but have things under my own domain. Since I couldn’t find the A record thingy for my domain withing a few minutes I decided that it should be possible to upload to my webspace via FTP through some continuous integration. So here is how to do that.

...read more

Invert strings

Getting close to finishing my Masters I recently started to interview for employment opportunities. As I have a Computer Science background this involves doing some programming. After all potential employers want to find out if I can code. These practical tests need to be short yet tell you something about the applicants skill level. One challenge I faced was to invert a string. And as JavaScript is my favorite programming language here are four way to do that in JS.

For loop

The always reliable fall that will surely work. For loops are a basic concept in programming. Pay special attention how this loop counts down instead of up.

1
2
3
4
5
6
7
function forLoopInvert(string) {
let result = ''
for(let i = string.length - 1; i >= 0; i--) {
result += string.charAt(i)
}
return result
}

Reverse and array

Since arrays in JavaScript come with a build in ´reverse´ function we can simply use that.

1
2
3
function arrayInvert(string) {
return string.split('').reverse().join('')
}

Fancy Arrays things

While we create an array from our string we might as well use a more functional approach in the sense that we can use reduce to create a new string from the array.

1
2
3
4
5
function reduceInvert(string) {
return string.split('').reduce((result, char) => {
return char + result
}, '')
}

Recursion

Ahh the height of programming: recursion. Where every Computer Science student gets to experience a stack overflow and popular websites get their name.

1
2
3
4
5
6
7
function recursiveInvert(string) {
if(string.length > 1) {
return string.substring(string.length - 1) + recursiveInvert(string.substring(0, string.length - 1))
} else {
return string
}
}

Conclusion

As always in programming you have many ways to solve the same problem. At an interview the fanciness of your code will come down to your nerves as well as proficiency at the language you use. So if in doubt make up methods things have and fall back on for loops 😉

Nützlich sein

Nützlich fühle ich mich auf Arbeit grad nicht mehr so wirklich. Meine alte Abteilung wurde leider aufgelöst. Also arbeite ich jetzt für den Musikstreaming Dienst music.163.com. Die Website kannte ich sogar schon in Deutschland, denn als Schnuppernagebot kann man sich hier die ersten 2000 (so in der Größenordnung) Titel gratis runter Laden. Zwei Wochen in einer Abteilung sein ist halt überhaupt und rein gar nicht sinnvoll. Also hat man mir erstmal eine Beschäftigung gegeben. Die Standard Aufgabe der Abteilung für neue Leute.

Jetzt kenne ich also einen Chinesischen Code Standard und könnte hier erörtern, wieso es unsinnig ist, für Menschen unverständlichen Code zu produzieren, nur damit die Seite den Tick schneller lädt und man IE6 unterstützen kann. Doch auf meinem Lebenslauf wird sich “Erfahrung im Umgang mit verschiedenen Standards” recht gut anhören, reden wir also nicht weiter drüber.

Der Hauptcampus ist jetzt mein zu Hause.
Der Hauptcampus ist jetzt mein zu Hause.

Dafür hat die Abteilung super T-Shirts und ist auf dem Hauptcampus. Ich brauche also fünf Minuten weniger bis zur Kantine und muss dafür nicht mal wirklich nach draußen :)
Plus das Café und Freizeiteinrichtungen sind jetzt auf dem gleichen Campus.

Die alte Abteilung war dann zum krönenden Abschluss noch einmal gemeinsam Essen, inklusive viel zu viel zu Essen und betrunkener Chinesen, die Bier um die Wetter tranken.

G20s heiße Phase

Während ich also fröhlich vor mich hinwerkel und eher mit privaten Projekten beschäftigt bin, könnte man meinen die Welt sei untergegangen, so viele Läden sind mittlerweile geschlossen. Selbst an gut belebten Hauptstraßen sind gut zwei von drei Läden zu. Im Shopping Bereich der Innenstadt geht dafür die Post ab, schließlich fahren hier keine Autos mehr auf den Straßen. Den West Lake kann man nur noch nach einer Sicherheitskontrolle besuchen, was anfangs zu Stau geführt hat. Mittlerweile gibt es aber einfach weniger Autos.

G20 macht auch an Bussen Werbung.

Morgen geht dann der richtige Spaß los, wenn an graden Tagen nur noch Autos mit graden Nummernschildern fahren dürfen. Und ja, so was geht in China. Was auch geht ist, Wachleute tatsächlich mal ihre Arbeit machen lassen. So sitzen die Herren in ihren Blauen Hemden jetzt nicht nur an den Toren der Universität herum, nein sie kontrollieren tatsächlich den Ausweis jedes einzelnen, der den Campus betreten will und lassen nur solche durch, die hier auch ein Anliegen haben. Ab Sonnenuntergang sind dann auch die Tore geschlossen, zum Glück öffnet mein Studierendenausweis diese.

...read more

📖 more posts 📖