HoverBaum

Ein Baum und seine Abenteuer

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
Falling in love - Image by Contentful

Back in the day

I remember first wanting to create a theme for Wordpress. So I went to Google, searched for tutorials and articles — and ended up with tons of walkthroughs on how to update some CSS to “theme” your Wordpress site with a custom color. Or behold, add some padding — tutorials praised this as the high arts. That wasn’t what I wanted! That wasn’t what I wanted at all!

Editing some CSS simply couldn’t be all there was to it. I wanted custom HTML and for that I wanted to get the content, and then write code that would create my custom HTML structure based on the content. I also wanted to only then add CSS to present my blog posts. Furthermore, I wanted to display all sorts of things about my posts wherever I wanted to, and not just in predefined places.

Thus I kept digging. Eventually I found a few places to get information from — and while I did speak PHP back then, I remember it being overly difficult to find all the places to get all the information from. What I was longing for was a clean documentation of: “This is how you get your data, and how it is structured”.

I felt that there should be documentation to tell me how to get the data, and how to work with it. Instead I got a bunch of interdependent references of “this class can provide …”, and that was a pain. I was waiting for that moment of clarity and understanding from which I could work my magic and make my websites sparkle ✨. But that moment never came.

In the end, I messed around a bit, barely went above changing a few colors. It was miserable work. And it made me quit developing with a CMS for some time.

Putting up with old problems

As is often the case, things started to gradually improve and I bit my way through custom themes for myBB boards (at the time the biggest Open Source forum software), a Wordpress site and quite recently a theme for the static site generator Hexo titled MeiliDu.

There was just no satisfactory documentation on how to get all the data

But the basic problem stayed the same. There was just no satisfactory documentation on how to get all the data. No one it seems was even thinking about this approach. I felt caught in one of those developer bubbles where we force pain onto each other because we think things need to be hard. While really we just hadn’t figured out a good way, yet…

The solution: going API-first

Suddenly there was an answer to all my questions. The great revelation came with the advent of the API-first CMS from Contentful. The idea was simple — they would tell me one thing, and one thing only: this is how you get your data, and how it is structured. And so my websites began to sparkle ✨

An API-first CMS is still a CMS, but one that deviates from a classic CMS like Wordpress, Drupal or Typo3 by not caring about the display of the content. Instead, an API-first CMS focuses on managing content and doing that well.

The API-first CMS works by abstracting representations of your data, defining “types” of data that can be stored and instances of data that adhere to these types.

For you to use the content managed through the API-first CMS they provide an API, typically a REST API that serves the managed content including functionality to search, filter, sort and paginate the returned content.

And on top of that API, you are free to use whatever framework, methodology and language you want. Wanna build a good ol’ PHP based website? Go for it! Single Page Applications without a backend at all? Be my guest! Static site generator like metalsmith? You betcha!

My personal favorite is a pure Frontend application based on React or Choo. For professional projects my go-to solution has been a React based application with Redux brought in for state management. On application load time, simply use the Content Delivery API to get all the data. You can just put the token for that into your frontend code.

With Contentful I like to structure my application into “pages” and “sections”, with the later being building blocks that a page can be built from. The heading of a page or a section about “four points that differentiate our business” could be such building blocks. The frontend then simply constructs a dynamic router out of the pages and their slugs (a field that I define in Contentful) using dynamic imports to load exactly the code for the sections used on any page. Add some Stylus as a CSS pre-processor (or your pre-processor of choice) and you got a great stack for a Contentful-powered website.

I’ve been having a lot of fun writing React-based applications that gather data from Contentful as an API-first CMS on load time. It has been a bliss to simply define building blocks within our websites and empower content managers through corresponding content types in the CMS.

The ease of development has astounded me, simply get all your data in a structured way (or at least the data you initially need, think about loading times) and render it on the fly. No need for backend scripts to render your site, no need to manage databases or crawl through overburdening documentation. Just focus on building great websites.

Living the dream

Now with an API-first CMS in place, all my hopes have come true and I finally have a good documentation of how my content looks as well as how to use it. All I have to do is write a frontend that will consume the REST API.

Separating the concerns of content management and content presentation will save your developers heaps of time

However, there are still some concerns. Let me address my two main concerns:

Cost: managed API-first CMS solutions come at a price. You can probably estimate a good 250$ per month for an API-first CMS to get started — or at least 50$/month to enable multiple users. Of course you could opt for Open Source solutions and self-host them, but chances are that you are making this move to reduce your workload. And precisely that is the strongest argument for the price. Separating the concerns of content management and content presentation will save your developers heaps of time — time that they can invest in awesome new features. Not to mention other IT staff whose time you will free up to do what really matters to the business.

Migration: chances are, you have a lot of good content. Your business uses the content for search engine optimization, to drive traffic and to educate customers. The last thing you want is to lose all that. Fear not, since API-first CMSs are content and API driven they come with great capabilities to migrate data into them. Just can define what you want to reuse, and to get an idea you can read my guide on migrating from Wordpress to Contentful.

Let me round this section off with a rundown of the benefits: API-first CMSs separates your content management from content display, thus enabling an easier understanding of what is going.

Closing Thoughts

I had a great journey along the way from the first quite clunky CMS solutions towards API-first systems. My data is flexible and unopinionated, the future is looking bright and I am glad to see my dreams about well documented content structure come true.


Originally published at www.contentful.com on May 2, 2018.

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.
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.

Der Campus ist allgemein tot. Von sieben Mensen hat momentan eine offen und deren Essen war noch nie besonders. Aber hey, die Restaurants um den Campus schließen ja erst morgen, dann macht auch das letzte, westliche Restaurant zu, um den Herrschern der Welt bei G20 eine saubere und sichere Umgebung zu bieten. …

Pakete erreichen HangZhou nur noch, wenn man weiß, welches Unternehmen man mit dem versenden beauftragen muss. In der ganzen Stadt gibt es keine Messer mehr zu kaufen. Auch so eine Sache, die vor zwei Wochen zufällig einer russischen Mitarbeiterin aufgefallen ist, als sie ihre neue Wohnung einrichten wollte. Und ja, auch einfach mal alle Messer in einer Stadt aus den Läden entfernen geht in China ohne Probleme.

Und G20 Werbung in der U-Bahn.
Und G20 Werbung in der U-Bahn.

Derweil verbreiten böse Geistern ganz viele Gerüchte. So sagen sie, die Sicherheitskontrollen würden schärfer werden und man müsse in der U-Bahn immer einen Schluck aus seinem Trinken nehmen, um zu belegen, dass dies kein Sprengstoff sei. Die Verwaltung lässt dazu mitteilen, die seien alles Haltlose Gerüchte und wer sie verbreite würde dafür Rechenschaft leisten müssen. Also die acht Sicherheitsleute, ein Polizist und zwei Soldaten mit Maschinengewehr an jedem Eingang der U-Bahn, die alle Passagiere aufgefordert haben ihre Getränke zu trinken, beweisen in meiner Erfahrung definitiv, dass es sich hier um Gerüchte handelt. Auch das Leute auf der Straße angehalten werden, ihr Trinken trinken und ihren Ausweis vorzeigen müssen passiert natürlich nie. Also außer jeden Abend an der Bushaltestelle, wo mein Bus hält. Komische Zufälle gibt’s.

Ohh ja und das alle kleineres Läden und Restaurants, so wie alle Hotels mit weniger als drei Sternen geschlossen werden, zumindest wen sie nah genug an der Konferenzhalle sind ist natürlich auch nur ein Gerücht. Ich meine es sind ja nicht teilweise ganze Straßen von Geschäften geschlossen, die fast Stunde entfernt liegen. Die Zäune um die Baustellen, welche die Sicht auf selbige versperren werden auch nur zufällig alle jetzt gebaut.

Ohh und bahe ich schon erwähnt, das jede letzte Werbefläche in der Stadt nun von G20 Plakten eingenommen wurde? Also jede einzelne!

G20 Werbung an einem Bauzaun.
G20 Werbung an einem Bauzaun.

Und wo wir bei vergessenen Dingen sind, es gibt jetzt auch insgesamt 3700 freiwillige Helfer an jeder Ecke der Stadt, die den ausländischen Besuchern helfen, sich zurecht zu finden. Es würde mich nicht wundern, wenn sie in ein paar Tagen den großteil der lokalen Bevölkerung stellen.

Ich freue mich einfach riesig, dass ich ab Samstag auf einer Reise bin und den ganzen Wahnsinn hier nicht durchstehen muss.

Mama, ich bin im Fernsehen

Seit heute wird “AI” in China ausgestrahlt und im Juni hatte ich das Große Vergnügen, den Ausländischen Programmierer in der Serie zu spielen. Eine eher kleine Rolle, deren chinesischen Texte vor allem durch ihre Komödiantische Falschbetonung auffallen ;)

Uhhhh, ich bin im Fernsehen.

In der Serie entwirft ein kleines Studio, voller genialer Köpf, eine AI. Also eine KI, Künstliche Intelligenz, im Englischen Artificial Intelligenz. Ein übler Großkonzern will diese natürlich sofort an sich reißen und das Team ist auch dafür, zu verkaufen, schließlich winkt eine Große Summe Geld. Doch der Kopf des Teams stellt sich quer und dann gibt es da noch ein paar Liebeleien und alles, was sonst so dazu gehört.

...read more

Die Zeit rennt

Nun ist es an der letzten Zeit meines Aufenthalts in China. Zu Anfang scheint die Zeit stets ewig zu sein, alles ist neu, es gibt so viel zu erleben, Pläne zu schmieden und Ort zu sehen. Dann kommt die Zeit, in der man sich eingelebt hat. Der Alltag hat lange eingesetzt und am Wochenende sitze ich gerne auch einfach einen Tag zu Hause, statt etwas zu unternehmen. Morgen ist wie gestern, Zeit vergeht nicht wirklich. Und schließlich kommt der Endspurt. Die Zeit rast. Es gibt noch so viel zu tun. So viel zu Erleben. So viele Pläne. Und es ist an der Zeit die letzten Tage durchzuplanen. Ich fange an, zurück zu schauen und mich gleichzeitig auf meine Heimat zu freuen.

Das Nationalmuseum in Beijing hat eine Beeindruckende Größe.

...read more

React 1 - Hello React

This is the beginning of a more detailed introduction to building React based applications. For those looking for a super fast introduction refer to my other blogpost. Todays goal is to get a basic component up and running, transpile the JSX and ES6 and finally the the result in our browser.

We are going on a big adventure.

...read more

📖 more posts 📖