Frontend at trivago

Insights, experiences and learnings from trivago's tech teams.

Read Large Scale CSS Refactoring at trivago

Large Scale CSS 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. I gave a lightning talk at the beginning of 2015 to present what we had learned at the LeanUX Meetup in Düsseldorf.

Read the whole article ›
Read How to export a JavaScript module to multiple formats

How to export a JavaScript module to multiple formats

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. This article shows how to use webpack to automatically export multiple formats without having to maintain them separately.

Read the whole article ›
Read Speeding up webpack performance with parallel builds

Speeding up webpack performance with parallel builds

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, thus making full use of the multi-core processing capabilities of modern devices.

Read the whole article ›
Read Risk-free Migration From Assetic to Webpack

Risk-free Migration From Assetic to Webpack

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 which was tailored to our setup, and which makes use of transducers.

Read the whole article ›