A list of selected articles which I published on external platforms.
CSS done right - Post RTLCSS
Our first right-to-left platform was released in 2014. We had developed a solution to generate right-to-left CSS with Sass mixins and variables as we have described in a blog article. We used this approach for nearly 3 years but recently migrated the right-to-left generation from pre-processing to post-processing with RTLCSS. With this article I would like to share the reasons for the migration as well as our experiences and lessons learned. [Read more]
CSS at trivago - Part 2: Naming Conventions and Methodologies
ACSS? BEM? OOCSS? SMACSS? BEMIT? UCSS? Atomic OOBEMITSCSS? What is wrong with CSS? Or are we wrong with all those conventions and methodologies? Are they really necessary? Which problems do we want to solve?
The second part of my series will focus on CSS naming conventions and methodologies and explain how and why we incorporate some of them in our large scale environment at trivago. [Read more]
CSS at trivago - Part 1: Structure and ITCSS
How do we handle CSS at trivago, what methodologies do we apply, how do we structure our CSS, what do we do for Quality Assurance and automated testing, how do we release our CSS?
A lot of questions which came up during my Project Ironman tour in Europe a few weeks ago. With a series of articles I would like to give some more insights how we approach CSS at trivago. [Read more]
Rebuilding an aircraft on the fly - A Pattern Library integration at trivago
We started at the beginning of 2015 with building the first prototype of a pattern library. I stumbled upon HBR’s pattern-lab work flow that they used as part of their redesign. I liked the solution, having the whole development inside a vagrant environment to easily share the code amongst developers and have an easier installation process. Not everybody has a local PHP version or a development ready web server environment on their local machines and we use vagrant internally for most of our development environments. We forked the HBRGTech Repo and used this as a base setup for our development.
Our Case Study: Our goal was to redesign our company pages and to prove that a design-development process like Atomic Design is more efficient. The planned redesign was a case study for the project trivago and patternlab. [Read more]
Large Scale Refactoring at trivago
While our company and our application were constantly growing, we often ran into some consistency issues between code and design. Because we didn't have a design/frontend system and development guidelines to follow, our UI became cluttered and unsustainable. This caused maintenance issues, slowed down our UI Development and caused us to produce technical debt with an overcomplicated CSS/DOM structure. In the end, we were afraid of spending our time on figuring out crazy rendering bugs rather than rapidly developing new UI features. [Read more]
Designing for RTL platforms - A flipped layout
Your favorite hotel search, trivago, is already available in countries as different as Mexico, South Korea and New Zealand. We are continuously opening new platforms worldwide.
As an international team, one of our goals is to be as close to the needs of our users as possible. This entails that we need to consider the cultural peculiarities from an engineering perspective. Things like different timezones and character encodings constantly remind us, that there is no center of the world.
For our expandation in the middle east area with our platforms in Israel and United Arab Emirates we had a particularly interesting problem to solve: How do we flip the layout of our page? [Read more]