Posts about Frontend

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

Running Cucumber scenarios in parallel can be tricky, especially when a custom test runner is used. That’s why we created Cucable - a Maven plugin to split test scenarios into smaller chunks that can be run at the same time.

Around a year ago, in our large scale refactoring project also known as Project Ironman, we stepped away from image sprites that we used for our icons. In this post we will explain our reasoning behind this decision and how it improved maintainability and website performance.

At trivago we are building and using a Pattern Library which is based on Brad Frost’s Pattern Lab adapted to our needs; our patterns are written in Twig. This Pattern Lab is based around Brad’s Atomic Design, which is also something that we are embracing.

When people hear about dropping support for a certain Internet Explorer version, they mostly think of all the CSS hacks and workarounds that could be removed as a consequence. However, dropping support for IE8 can have subtle, but profound effects on your JavaScript.

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.

When publishing a JavaScript library, we usually want to make it available to as many people as possible to maximize the library’s usefulness and adoption. In that respect, it can be helpful to users to have the library available in their preferred module format - CommonJS, AMD, ES6, etc.

When using webpack to build your assets, it’s only a matter of time until you wish for targeted builds. Whether it’s the output of the library you’re working on (CJS, UMD, AMD, Var, etc.), or the specific feature set (IE8 support, no IE8 support). parallel-webpack can run those builds in parallel.

Learn how we introduced webpack to build our JavaScript assets. One of the main challenges was to run both Assetic and webpack in parallel for some time, in order to run tests and to make sure nothing was broken. This was achieved without any code or configuration duplication by developing a custom webpack loader.