Internal hackaton at trivago

Date posted: November 19, 2014

trivago hackaton
One more night before we are going to start the internal hackaton at trivago. The topic of my hackaton group will be spider detection”. We will have a lot of data in log files. And my part of the project will be visualizing this data. I will dive into AngularJS and create some controllers, directives etc. for that. I am excited and looking forward to work together with the back-end developers.

For the project I used a couple of javascript libraries

the front-end prototype was working. but the pushed (json) data was not. So in the end we didn’t had a working prototype to show during the end presentation. This was a bit disappointed for me.

d3js.org

Date posted: November 13, 2014

The next thing were I need to look into :
http://d3js.org/ after that maybe some pytho!

trivago banners

Date posted: November 10, 2014

On this place you find the banners I have created for trivago. We use these banners in campaigns we set up in google adwords.

Investigating SVG animations

Date posted: November 3, 2014

The first article I am going to read: http://davidwalsh.name/svg-animation.

I have to examples where I have just save vector files in Illustrator CS6 as .svg files. I have copy and paste the svg code into html code and see here the results:
svg trivago logo
svg trivago icon (velocity.js)

Here under a good example of the a range function I found on velocity

function r(min, max){
return Math.floor(Math.random()* (max-min +1))+ min;
}

svg is a xml format

svg explanation

HTML5 experimenting with the CANVAS element

Date posted: October 28, 2014

Here is an old experiment I found. I have made two sliders with images of my former Océ Design colleagues. One slider works with the input element with attribute type=”range” and the other slider is based on mouseover events. slider. I haven’t write the javascript code myself. If I find the source I will give the credits to the coder here.

Another site I need to look into: canvassing.

This is soooooo awesome: KEITH PETERS IS CREATING.

here are some experiments

the next step on which I will be focussing: sprite animation

Single html css file with animation

Date posted: October 27, 2014

To explore the possibilities what kind of animations only can be done by HTML and CSS. I have created this file single_file_animation.html I learned about the prefixes again. One good tip: animation-fill-mode. Nowadays there are also a lot of online CSS animation tools. One of the first results in google gave me this link: www.css3maker.com/. Really easy, define the animation and copy and paste the code. Next challenges will be events and combining multiple animations to an element.

Update: I found this link today: css-sprite-sheet-animations-steps.

I have created this file: css sprite animation

all the cursors

cssflip

An easy map compare site

Date posted: October 17, 2014

http://mapfight.appspot.com/

https://jsbin.com/honawo/quiet

Learning to work with Adobe Edge Animate CC

Date posted: October 13, 2014

After my first big project at www.trivago.com the flash moon dealform (make sure you disable you addblocker). I will be focussing again on banners but this time we are not using Adobe flash anymore. After researching a bit on the interwebs I struck on the new Adobe tool Edge Animate CC. Here are my first experiments with Edge.

tutorial Edgehero

Beyond Tellerrand 2014 (notes)

Date posted: May 20, 2014

beyondTellerrand

Thanks to trivago I could go to beyond tellerrand

Here is a list of things I saw there:
19-05-2014
1. Ethan Marcotte – @beep
– Laziness is not bad!
http://thisismadebyhand.com/ (check)
– learning nth-child(n) – very handy for grids/lay-outs
– Responsive video use ratio // Width/height = put as top-margin put a video tag in that container with absolute position // width, height:100% ,top, left:0px

2. Chris Coyier (codepen)
http://caniuse.com/
– svg is supported by the current browser
– 2014 is the year of svg
http://iconic.com/ (check)

3. Robin Christopherson (blind)
– Very interesting talk about accessibility
– Accessibility at trivago???
– very intense and emotional ending

4. Jessica Hirsch
– A lot of illustrations/portfolio beautiful fonts

5. Ola Gasidlo
– offline first
– this year the internet becomes 25 ;)

6. Bastian allgier [pooping lion]
http://redecentralize.org/
– network like whatsapp and private (social) networks
– internet of things
– parallel universe
– decentralised vs centralised

7. Jon Burgerman #itsgreattocreate

20-05-2014
1. Dan Mall
– process vs framework (balls vs football)
– waterfall to agile
– talking about multidiscipline teams (user experience-designers-developers mixed)
– Jennifer Brook – user experience designer (check)
RIF reading is fundamental
– use more spreadsheets (f.e. you have 800kb | webfonts | images | loading time -)
– inventory is important for research
pattern lab (check)
Daniel Mall/ (check)
– linear design
superfriend
– framework – 1, 2, 3 Sketch, 4 Prototype(start small use codepen)

2. Jonathan Snook #039 // blue green
– use css modules (@import “btn”, etc)
– naming conventions
– don’t use ID’s, only classes
– use child selectors .menu > li
– only nest with media queries
http://smacss.com/ (check)

3. Karenmcgrane
– the next new thing about communication
– print -> web -> cars, watches, the internet of things, etc
– WYSIWYG is DEAD (the web is not a laser printer)

4. Eric Spiekermann
– Font: Firo (mozilla) free font (check)
http://next.fontshop.com/tryout (check)

20140520_150502

5. Stephen Hay – 16:00 – Dutch
– A -> B is easy … we make the web to complex
– Keep it simple
responsive designworkflow book

20140520_164957

6. Maciej Ceglowski
– comparse the internet with the roads of the USA
– comparse cars with devices
– funny animal pictures!!
– security/ privacy – clear my browser history
– de-americanize the interwebs

20140520_172654

Getting code batches

Date posted: January 21, 2014

I really like the nowadays online code courses. Here are some of my achievements.
@codeschool and @codecademy

If you want to see a summary of all my batches check out @coderbits