Uploading excel files into the browser

Date posted: October 26, 2015

My latest project at trivago: http://admin.dea.trivago.com/tools/TNT/feed_uploader/

The goal of this tool is to upload excel files to the server. After the excel is uploaded I create a table in the database. And fill the table with the data of the excel file.

The format of the excel file should be as followed:

Column 1. destination
Column 2. path id

In the mysql I create an extra column: default image.

Further background info:

Based on the “Path ID” I create a image filename. f.e. Amsterdam has path id: 46814 by default the image filename will be 46814_v1.jpg

With the results of the columns of the data inside the database I wil check if the images based on the default filename are available on the trivago server.

If they are available they will show up in the tool. I also check if there are more images (“versions”) available. They show up on the end of each row.

Users can change the default images by clicking them.

Once the user has chosen which version of the image he wants to use. And is ready editing. He can download the excel.

To make all this magic happen I use the following libraries:


Working with AngularJS – Rows and Columns

Date posted: June 24, 2015

Good examples that need some extra attention you can find here. I have to learn how this is working: jsFiddle

Adding JSzip to the project

Date posted: May 5, 2015

I have been working on a project were I need to download html and images from a website combined in one zip file. I found out about: JSzip. This Library does the job. The first problem: Multiple XMLHttpRequest for downloading the images. Al the time I only received the response result after from the last XMLHttpRequest.

I wrote a recurring function to solve this problem:

here is the complete script:

var aImagesSrcs = [],
iCounter = 0,
zip = new JSZip(),
imageFolder = zip.folder("images"),
newsletterName = 'newsletter.html';

function grabImages(){
if (iCounter < aImagesSrcs.length){ try{ var filename = aImagesSrcs[iCounter].replace(/^.*[\\\/]/, ''); console.log(filename); var xhr = new XMLHttpRequest(); xhr.open('GET', aImagesSrcs[iCounter], true); xhr.responseType = "arraybuffer"; xhr.onreadystatechange = function(evt) { if (xhr.readyState === 4) { if (xhr.status === 200) { imageFolder.file(filename, xhr.response); iCounter++; grabImages(); } } }; xhr.send(); } catch(e){ alert('Issue with browser.') } } if(iCounter == aImagesSrcs.length){ var content = zip.generate({type:"blob"}); saveAs(content, "newsletter.zip"); console.log("AND IT IS SAVED, YOU DID IT AGAIN!!"); } } function findAndReplaceSrcImages(sourceHTML){ var str = sourceHTML for(var i = 0; i< aImagesSrcs.length; i++){ var filename = aImagesSrcs[i].replace(/^.*[\\\/]/, ''); str = str.replace(aImagesSrcs[i], "images/"+ filename); } return str; } //src : http://jsfiddle.net/TzVd3/2/ function grabHtml(elId) { var str ='';
var elHtml = str + findAndReplaceSrcImages(document.getElementById(elId).innerHTML);
var body = '';
var n = elHtml.search("

") + "

var output = [elHtml.slice(0, n), body, elHtml.slice(n)].join('') + "";
zip.file(newsletterName, output);

$( document ).ready(function() {
//if the page is loaded first grab all images sources
aImagesSrcs = $('#main').children('img').map(function(){
return $(this).attr('src');

$("#download_btn").click( function(){

Prototyping download zip

Working from Palma de Mallorca

Date posted: April 16, 2015

Since I am a employee of trivago I have the privileges of working at our Mallorca office. We own a house on the island as big as a mansion. I am sharing this house at the moment with 6 colleagues. There is room for 12 persons. Here are some pics:



The house is beautiful, the island is beautiful, the people are beautiful but in the end I am here to work.

Actually I work on a really cool project: Generate responsive newsletters based on feeds. – After you have set up the newsletter you can downloading it by pressing the download button and use it for email campaigns.

concept : http://trv.to/design/newsletter/

requirements : MySQL database, Bootstrap, AngularJS

Started using Github

Date posted: March 11, 2015

I have started to upload files to github. If you think you can use anything I put in there. Be free to use it.

Quote at talk of Rüdiger Nehberg

Date posted: March 10, 2015

He who fights, can lose. He who doesn’t fight, has already lost.
— Bertolt Brecht

Old school actionscript 3 Flash programming

Date posted: February 25, 2015

For a campaign in March 2015 trivago bought some banner space at web.de. The campaign will only be live for one day and here is the flash banner that will be shown. http://www.soentjens.nl/experiments/trivago/projects/web_de/index.html.

I have created the banner in Flash CS6 with as3.

It is not one banner but there are actually two banners

1. format 180×850, max. size 40 kb
2. format 321×250, max. size 50 kb

There are 46 links inside the two banners.

We expect that on the day that we start the campaign. There will be around 8 million visitors on web.de.


Date posted: January 29, 2015

This will be an interesting framework to look into: http://aurelia.io/

Here a very positive aurelia article: http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/ and this one: http://ilikekillnerds.com/2015/03/aurelia-vs-react-js-based-on-actual-use/

debugging date algoritm javascript

Date posted: January 27, 2015

While setting up the test server at trivago, my new playground ;). I found out that there was a bug inside the HTML5 moon dealform creatives. The dates inside those creatives are updating, depending of the current date of the user. While debugging I also took a closer look into bootstrap here is the result. I have to investigate this http://momentjs.com/ it seems legit for the job.

Game dev. stream at twitch

Date posted: January 15, 2015

I was checking my twitter when grapefrukt tweeted that he is doing live game development. I really enjoy watching him coding/designing and chatting about what he is doing. Here is the twitch page : http://www.twitch.tv/grpfrkt/. I am not sure if he is live now ;)

The tools he is using are : Haxe, as a code editor he is using flashdevelop and I see him using Adobe illustrator. I think these twitch live webcam/ coding streams are very inspiring and entertaining.

Screen Shot 2015-01-15 at 17.00.00