Project Ironman – Large Scale Refactoring @trivago

I had the pleasure to give a presentation about Project Ironman at a user group in Dortmund.

Project Ironman was the technical migration of the trivago hotel search’s existing CSS core to a pattern library based user interface.

After a long journey, we started to establish a Design / Frontend System from the beginning of 2015 at trivago incl. introducing a pattern library, a atomic design workflow, new coding guidelines and adapted several methodologies like BEM or ITCSS to help us maintaining and developing our CSS/UI at large scale.
Some of the top-level goals of creating a Design System was to ensure consistency in code and design of all our applications as well as reducing technical debt and keeping our application scalable.
I gave a lightning talk at the beginning of 2015 to present our learnings and the issues caused by not having a complete design system at the LeanUX Meetup in Düsseldorf.
In less than a year we were able to develop the base of a new Frontend / Design System and started to redesign / reimplement some of our applications like our trivago company pages.

Nevertheless implementing a new CSS / frontend foundation in our core product the trivago hotel search was a completely different challenge. Around 100 people including Developers, Product Owners and Designers work on this application and a lot more have a stake in it, so there is now way around to do smooth (agile) transition and keep (product) development freezes, which will normally be caused by a refactoring, as low as possible.

So therefore we decided to migrate the CSS foundation to the new base we have developed in our Design System in a very short timeframe and we only had to postpone a few UI related features. After this step is done we are able to built new UI components on a solid, modern and sustainable base.

The project was a huge success, the proposed timeframe was 4 weeks and with an amazing spirit due to our incredible engineering culture and people we were able to finish this project within 3 weeks including positive metrics on the business side.

We are currently working on a blog article about this project and we will publish it on our trivago tech blog as soon as it is finished.

Until then, you might have a look at the slides.

The talk was presented at the OpenTechSchool Meetup Dortmund and gives insights and background about the project scope, its implementation and the business value.

Wifi access granted by QR Code

I don’t like QR codes. Because i often have to implement them into a footer or a sidebar because somebody thinks it is a good idea to let people scan QR codes on the web. But that is a completely different story.

A QR or Quick Response Code can take up to 4296 alphanumerical characters and thanks to its error correction it is very useful e.g. for outdoor usage. Normally a QR Code is used to forward you to an URL but as not so many know you can also use it so grant people access to your wifi network by scanning the QR code and provide an unforgettable visitor service to your friends.

Here is how it works:


where authentication method might be WPA/WEP/nopass and H: defines whether the network is hidden or not.

With this information you can create your QR code either with e.g. qrencode or use a service like QRCode Monkey

Print it out and put in a picture frame. Your friends and all the nerds will like it.

El Capitan and SIP

Upgrading OS X to a newer version normally works like a charme. At least compared to my experiences with linux or Windows.

I use homebrew as a package manager for OS X to fulfil my needs for extra / customized software and packages i use for development purposes. Since i knew from former releases like Yosemite where the installer processes copied /usr/local (where homebrew installs everything by default) file by file and took me 4h to update that this could lead to problems while updating i googled before migrating to El Capitan for issues with homebrew.

Part of the OS X 10.11/El Capitan changes is something called System Integrity Protection or “SIP”.

SIP prevents you from writing to many system directories such as /usr, /System & /bin, regardless of whether or not you are root. The Apple keynote is here if you’d like to learn more.

The following instructions this link provides helped me fixing my homebrew installation.

Basically i had to do

sudo chown $(whoami):admin /usr/local && sudo chown -R $(whoami):admin /usr/local

to get my homebrew installation working again.

Furthermore i had to update my oh my zsh installation via


to get rid of some permission errors.

For getting my old PHPStorm8 to work i had to install the Java 6 Runtime again. I will wait a few days before updating my macbook pro which i use for productive development.

fluid boxes with fixed aspect ratio

In some cases e.g. for displaying a responsive video we need a solution for flexible elements which keep their aspect ratio when resized. You can do this with javascript but then you are doing something wrong.

Displaying flexible images is not a problem as we might know but keeping the aspect ratio on block elements like div isn’t that easy because their height is depending on their content (height: auto) or fixed values.

When we take a deeper look into the CSS specification we see that the padding-top when given in percentage on a block is calculated out of the width of the containing element.

“Percentages: refer to the width of the containing block”

With this knowledge we are now able to produce a flexible container that keeps its aspect ratio while resizing. Lets first make a responsive video:

See the Pen responsive video – keep aspect ratio by Christoph Reinartz (@creinartz) on CodePen.0

The trick is we set the padding-top of the outer element top to 56,25% (9/16 = 56,25%) and set the parent element to position absolute and fluid 100% width and height. For a 4:3 video we would use 75% (3/4 = 75%) to have another aspect ratio.

Doing this let us solve a problem with may arise during developing a responsive website. A flexible box which should keep its aspect ratio, e.g. a box which always has the same height as its width.

Lets do this 100% x 100% box and 200% x 100%.

See the Pen Flexible box same height as width by Christoph Reinartz (@creinartz) on CodePen.0

i like this!

about:consistency – lessons learned: the hard way

i had the big pleasure to give a lightning talk at the leanUX meetup organized by the guys from sipgate at Düsseldorf.

the most exciting point for me was that one of my favorite speakers, a man called brad frost, also talked at this meetup.

so to let him understand what i am talking about i did this talk in english, which was quite challenging and needed some more practice than doing a talk in my native language.

i was very glad that i received a lot of cool feedback after the talk.