Noslidesconf, coffee & Bologna

It all started in August this year. Christian Heilmann tweeted something about a conference without slides, just hands-on and live coding. Challenging I thought and after I had a break of a few weeks after my Project Ironman tour I decided to apply.

I do love challenges. And I already had a good idea: I wanted to live code something with our large scale codebase at trivago. I thought this might be very interesting to see how we do live changes to our codebase, e.g. implementing an A/B test. I submitted a very vague proposal about this idea and asked the organisers to tell me whether they were interested. They did so and came back to me in October and asked for my a final abstract. Things became serious.

So I’ve submitted my final abstract:

Let us build a feature on Trivago
A feature implementation in the production codebase of one of the biggest metasearch engines worldwide. Trivago is a highly data driven company and this session will show how we implement an A/B test into our core product. The demo will show the lifecycle of a feature, from implementation, through testing, review and finally to deployment.

Wohoo! The first step was done.

This was the moment were I became really aware of what this actually meant. Yes live coding is already a challenge but relying on a very good internet connection and assuming that all internal systems and services were fully available on a Saturday morning is a step further.

So now I had to do a few things: I had to make sure that the systems are available, that the deployment works, that my local environment works, my VPN connection is stable and that some people are volunteering to do a code review remotely on a Saturday morning. I could write an own article about the awesomeness of my colleagues, but I keep it just short: None of that was a problem.

I did some trials, but what should I say none of them really worked out, at one I completely fu**** up the git branch, the other time I did a super nasty typo which took me ten minutes to discover and another time I had massive problems with the display port to HDMI adapter which caused me to do a reboot. D’OH! So this meant I had one try, what could possibly go wrong? At least I was confident about the story.

From what I’ve learned from my conference talks throughout the year, be early enough at the location especially if you have never visited the area before. So I decided based on the available flights to go on Friday noon so that there is enough time to clarify a few things which are important:
1) How do I get to the venue (I normally choose a Hotel as near as possible to the venue especially if I do have an opening slot to avoid any hassle e.g. with public transportation in the morning)
2) Where do I get a coffee? (More on that later)
3) How do I get from A to B. E.g. for a speaker dinner, do some sightseeing or visit a possible after party.
4) I might be hungry and thirsty, so where do I get Pizza and beer?

I had a wonderful flight, look at the picture which I took when we were over the Alps and I do love the Alps. Lovely or? I mean what could possibly go wrong after such a nice flight.

15259421_1290883057640259_5563286098817638672_o

My original plan was to take a taxi to the Hotel but when I left the airport, the Taxi were on the left side, on the right was the Areobus. I had a very good flight and decided to turn right. Taking the bus offered me some opportunities. First getting a bit to know the public transportation system as well as getting a bit more insight into the area itself. Google Maps told me to leave at Mille and take another bus line with the number 24c to a bus station close to the hotel. I realized soon that the public transportation system of Bologna is incredible, there are apparently hundreds of lines all with some letters at the end which apparently are variations of the route, so you had e.g. 24a, 24b, 24c, 11a, 11b, 11c and so on. I also saw a 12t. There were hundreds of busses and on some stations busses arrived every minute. Also if 11c drove to Rizzo this doesn’t meant 11b did either. It might decide to drive in a kind of same direction but then also not. Confusing. But I had Google Maps. My deep respect for the people in Bologna who were apparently able to understand that system.
Later I found out that it was only 3km by feet from the city center to my Hotel which let me walk a few times also because I like walking and this is also a great opportunity to get the city and atmosphere to know.

I was super satisfied with my Hotel HC3 in Bologna, after checking in I tried to resolve point 1 on my list and go the venue. This was quite easy as my hotel was only 200m from the venue and according to Google maps I apparently already crossed it during the walk from Istituto Aldini where 27a/b/c / (I don’t remember anymore) dropped me off. So a no-brainer, but I wanted to be sure. While going back from where I came from I passed a kind of backery / store / whatever. Time for a coffee I thought. A bit outside the city I hope I could get along with english, but who should not know what a coffee is? Remembering my Italian colleagues who are always drinking espresso from small cute cups I entered it and told the waiter to bring me a coffee. I’ve added a regular / normal coffee. I waited for my 150ml cup of coffee. But I received a cup in a size which I never expected that something like this exists. It looked like 1cl in a miniature cup. I was disappointed. I’ve received another super small glass, so I thought nice I get strong alcohol on top, but it turned out it was just water. Disappointing. The 1cl tasted well, but come on. I thought ordering 10 more but they also seemed to be very strong. I didn’t want to have a caffeine overdose.

I passed by the venue. All good, super easy to find that in the morning. Speaker dinner was at 20.30 and I had to use public transportation to get there and I still had plenty of time.

I entered Bus 11c to Rizzo. One of my colleagues gave me some hints on what to visit and as I had some time on Sunday morning I wanted to know how to get there. On the way back to the Hotel I tried to get another (proper) coffee but again I received a small cute cup with 1cl compressed coffee. I’ve complained on Facebook about that and my colleagues told me I need to ask for a Americano to get my coffee. I decided to try to make use of that information at a later time. I still hadn’t resolve point 2 on my list about the coffee, but I made a checkmark behind 3 and 4. I didn’t find any super market but dozens of shops & restaurants, so eating and drinking (coffee excluded) was possible nearly everywhere.

img_20161202_174217

The dinner was at Ristorante Pizzeria L’amafitana. A super nice place and I do love Italian food. I got the organizers and other speakers to know – such lovely people – but I was also very tired. After some tortellini and Pizza and approximately one liter of beer I decided to leave soon also because I became really nervous and normally I tend to not sleep so super well before talks. I went to toilet and the water tap was somehow broken so that the water ended up on my pants instead of on my hands and it looked like I have peed in my pants. How embarrassing. I said good bye and followed the Google Maps instructions.

I had to take 27b at a station 800 meters away which should drop me off 1.2 km from the hotel away. What should I say, the confusing transportation system seems to be very reliable, the bus came on time and I was back in the hotel at 11:30pm. Good night.

At breakfast I’ve realized that the coffee machine offered a option “Americano”. Omg I was relieved. Finally I was able to resolve point 2 on my list: a proper coffee <3. This is exactly what I need before a talk. I had 3. Also I’ve realized that the breakfast was more sweeties, cookies and cakes but I’ve also found some bread and cheese. I’m vegetarian btw.

The hours before a talk I’m always in a kind of a tunnel. I went to the venue, the most critical things to solve now was finding out asap whether the beamer connection as well as the internet connection works. People were so lovely and helpful. At 9am I was confident that the whole thing seems to go in right direction. Beamer worked, Internet was incredibly stable and fast. The trivago hotel search application was smoothly running on my local machine. Nevertheless I was really nervous. I let my colleagues now everything is good and I’m ready. See this conversation of the slack channel that I had created for the conference.

bildschirmfoto-2016-12-05-um-22-44-17

Omg I was so nervous, you can see that a lot of my responses where just “haha” or “ahaha”. But I had to do this thing. So I started with my session. First I’ve introduced myself and a bit of what I’ll doing the next 45 minutes. Kicking off the feature starts with a task.

So as you can see after 5 minutes I was good in time. Also I don’t know every time I’m on stage I always have to make side notes of Agile (note the capital A). As you can see “noEstimates” is highlighted and not a valid entry for story points. But we didn’t had time for planning poker games.
Before going into coding itself I’ve explained a bit of the architecture and tools we use.

I started to create the feature, added a modal box from our Pattern Library and implemented this as an multi variant test with a feature toggle. What could possibly go wrong, yes something went wrong. The modal box component was somehow really broken as you can see later, but ok, the audience didn’t seem so much front-end / UX focussed. So I just told them the layout is broken and we don’t care. But I did care a lot, I fired up the inspector but soon realized this was not the right moment to fix / investigate some nasty markup / CSS issues, so I’ve just continued as nothing has happened. This was the most critical point of the presentation.

Also I didn’t had another choice. Later I found out that it was just a class mismatch. Damn! All other stuff went to super smooth. Unbelievable, no nasty typos, nothing.
While implementing the feature I did several reloads of the application to prove that my changes are working, e.g. after creating the feature toggle, I showed that I can activate and deactivate it. Also after pulling in the new UI component from our pattern library I had to rebuild the assets to get the component styled.
After approximately 30 minutes I was able to push the feature and created the pull request. I had changed 9 files, and had written around 100 lines of code in PHP, twig, Scss and XML.

I let my colleagues know it is ready for code review after 30 minutes. You can’t do a deployment until someone has approved your code.

bildschirmfoto-2016-12-05-um-23-00-29

I’ve added some easter eggs like an unnecessary !important to trigger some comments. It has worked.

bildschirmfoto-2016-12-06-um-16-26-10

Now everything was ready to start the deployment. I started to trigger it with our build systems and explained to the audience what is happening. The deployment went through without errors in 6 minutes.

After around 40 minutes I was done, the feature was deployed to an internal staging systems. It looked a bit broken, but YOLO. I did the final show case of activating and deactivating the feature and told the audience that I forgot to implement the close button functionality and finished after 39 minutes at 10.24am my session. WOHOO!!!

bildschirmfoto-2016-12-06-um-23-18-26

Yes and I did mention that there was a small issue with the layout. See here:

cyvelctwqaatyj4

I’ve answered a couple of questions which is normally the most exhausting part for me after a presentation because I’m then completely out of energy. Nevertheless I’ve answered some really cool questions. After the presentation there was coffee break, but guess there was no Americano only this 1cl coffee.

I enjoyed the rest of the day with other really amazing live coding session with a lot of diversity in topics. What a cool concept for a conference.

I went to bed at 10pm because I was terrible tired and I wanted to use the Sunday morning to visit the city center before I had to catch my flight in the early afternoon. So I set my alarm clock to 6.30am had a few delicious Americano at breakfast and went to the city center.

img_20161204_101500

I visited the area around Piazza Maggiore. What a beautiful area of Bologna with a lot of old buildings.

What a great but exhausting weekend. Looking forward to the next noslidesconf.

 

 

The junior speaker

I have been very lucky. I have to admit. But maybe I also worked a lot for what I have achieved.

A lot of things happened in the last weeks and months, I have travelled around a lot, talked a lot, thought a lot and learned a lot.

It is time for a retrospective.

What happened. After we have been very successful with various things we do to our frontend at trivago, like refactoring our CSS or introducing a Pattern Library I wanted to share our experiences not only with articles but also with speaking at conferences. I did my first talk at the PHP Usergroup Düsseldorf in the beginning of 2014. The experiences there empowered and motivated me to continue speaking. I refined my talk and were lucky enough to have my first conference proposal accepted at the code.talks conference 2014 in Hamburg. I talked in german about our very successful adaptive responsive design which we had implemented in 3 weeks in the end of 2013.

It has been amazing. Standing in front of 400 people, being recorded and blended by all those lights. I wanted to continue but 2015 was a year of a lot of groundwork, e.g. for implementing a Design System at large scale. But I used the chance to speak at the LeanUX Meetup in Düsseldorf at an event where also Brad Frost was invited. I talked about our experiences with code and design inconsistency and our first steps adapting a pattern library.

In the end of 2015 we made huge steps forward with rebuilding our UI at large scale. I wanted to share our experiences. After I have done a talk at the Open Tech School Meetup in Dortmund and people enjoyed my talk, I started to apply for various conferences in Europe.

I didn’t expect organizers to accept my talk, so I did 5 CFP’s and hoped maybe one of them will be accepted. I was wrong. 4 of 5 CFP’s have been accepted.

My talks were selected for Symfony Live Cologne, Codemotion Amsterdam, Frontend United and ScotlandCSS. I was a bit surprised and overwhelmed. But I like to get things done, so why not speaking at all of them.

Preparing, training and performing a talk costs a lot of effort. At least for me. It took me hours to come with a first version, which I then performed at a local Meetup – The Webworker NRW. A very nice meetup with a lot of very kind people. I didn’t even know the order of my slides, but I was still able to get my story transferred to the audience. People provided me with a lot of valuable feedback. I was still in the opinion that I don’t need any speaker notes but to do everything spontaneously.

The JSUnconf came in between. A good opportunity for me to propose my talk in the voting session. People liked the topic very much and voted a lot. So it happened that I had the first session with my talk proposal. I should have said that I didn’t had a good night and only very few hours of sleep but this didn’t stop me. My talk performance was I would like to say OK. In regards to less sleep and still don’t using speaker notes I maybe did even quite well. But in the end I have been stuck in a “Umm, basically…” mode. I have been out of vocabularies.  Nevertheless feedback was overwhelming and a lot of people asked questions and I was even asked to do a Q&A session on the next day. At the end – again – I have received very valuable feedback from the attendees.

The week after there was Symfony Live in Cologne. This was a blast. The conference was in german and entertaining the audience in your native language is way more easy than in a foreign language. I realized I don’t need speaker notes in my native language, but when I do talks in a non-native language. The talk was quite entertaining and the audience was so lovely and laughed a lot about my jokes which made it very easy for me to get my talk done in a very entertaining way. Hope to see the video cut soon.

I had a break of 12 days. Then Codemotion Amsterdam. A very lovely and diverse full-stack conference. But I made a mistake, first of all I have learned that you should always take a day off before a talk to be more relaxed and not distracted by other things that can happen e.g. at work. Second, it is not a good idea to try to save some money for your accomodation and so next time I will think twice whether it is a good idea to choose a hostel before doing a talk. To be honest I think I slept 2h. Also because I tend to be nervous but the noise level in the hostel was way higher than expected. But who cares. I had to get my talk done anyways. So I performed, not excellent but I got my message across. Again – shame on me – without speakernotes.

I never did the same talk but always tried to adapted my talk for the audience as well as based on the feedback I got. The challenge for Frontend United and ScotlandCSS was now to get it into a 20 minute and 30 minute slot and make it a bit more technical and use a technique called speaker notes 😉

I did so. Frontend United was a blast. Such a lovely small conference. I am very grateful to be part of it. My talk has been successful. Having speaker notes helped me to keep focus but I was still able to keep a bit of authenticity. I hope my video will be published soon.

Only 3 days later I was in Edinburgh, the showdown of my Project Ironman tour. I have never been that nervous before a talk. It was always a dream since I started with doing talks to be a speaker on a CSS conference. I was very proud and so grateful. But also very nervous. I went on the stage and according to most of the audience I delivered a great talk. I still have to wait for the video but for my personal interpretation this has been the best talk I ever did in english.

Thanks a lot to all the people involved in those weeks, be it with cheering me up, motivating me and supporting me. A special thanks to my colleagues at trivago. You are awesome.

I have also experienced some bad things. It might be natural that people get envy and show you that with words and actions, but those people will always exist. I didn’t expect it would hit me so hard. If 99 people cheer you up and 1 person tries to let you down, the latter will be the winner. I have to work on that.

Also I have learned that you have a lot more responsibility as a speaker than I have initially imagined. With great power comes great responsibility. Especially if you are authentic and love to make jokes about everything including yourself It can be very easy to offend people. This gets worse if you are not a native speaker. People might get your words wrong. On the other hand you might have a great power while being on stage which you should be aware of and choose your words wisely, but you are also very vulnerable in this moment. Every word, every gesture, every facial expression might get tracked and there is no chance to revert any of your actions and words whether they were intended or not.

All in all it has been such a great time. I have done 6 talks on conferences, unconferences and meetups in 6 and 1/2 weeks! Still don’t know how I was able to get all this done. I’m very grateful especially to the organizers and attendees of the mentioned events. I have met a lot of wonderful people. Hope I’ll stay in contact with them.

THANK YOU!

 

 

 

 

Wifi access granted by QR Code

I don’t like QR codes. Because i often have to implement them into a footer or a sidebar because somebody thinks it is a good idea to let people scan QR codes on the web. But that is a completely different story.

A QR or Quick Response Code can take up to 4296 alphanumerical characters and thanks to its error correction it is very useful e.g. for outdoor usage. Normally a QR Code is used to forward you to an URL but as not so many know you can also use it so grant people access to your wifi network by scanning the QR code and provide an unforgettable visitor service to your friends.

Here is how it works:

WIFI:T:<authenticationMethod>;S:<SSID>;P:<password>;H:<true/false>

where authentication method might be WPA/WEP/nopass and H: defines whether the network is hidden or not.

With this information you can create your QR code either with e.g. qrencode or use a service like QRCode Monkey

Print it out and put in a picture frame. Your friends and all the nerds will like it.

El Capitan and SIP

Upgrading OS X to a newer version normally works like a charme. At least compared to my experiences with linux or Windows.

I use homebrew as a package manager for OS X to fulfil my needs for extra / customized software and packages i use for development purposes. Since i knew from former releases like Yosemite where the installer processes copied /usr/local (where homebrew installs everything by default) file by file and took me 4h to update that this could lead to problems while updating i googled before migrating to El Capitan for issues with homebrew.

Part of the OS X 10.11/El Capitan changes is something called System Integrity Protection or “SIP”.

SIP prevents you from writing to many system directories such as /usr, /System & /bin, regardless of whether or not you are root. The Apple keynote is here if you’d like to learn more.

The following instructions this link provides helped me fixing my homebrew installation.

Basically i had to do

sudo chown $(whoami):admin /usr/local && sudo chown -R $(whoami):admin /usr/local

to get my homebrew installation working again.

Furthermore i had to update my oh my zsh installation via

upgrade_oh_my_zsh

to get rid of some permission errors.

For getting my old PHPStorm8 to work i had to install the Java 6 Runtime again. I will wait a few days before updating my macbook pro which i use for productive development.

Open files from command line on Mac

I tend to use User Interfaces as much as possible because i like them and i like to built them. Nevertheless i am finding myself more and more working on the command line.

Since i never start a project again without build-tools like grunt or gulp or package managers like bower or composer and favoriting a vagrant i spent a lot of time during the development on the terminal.

Btw. i prefer iterm2 as my terminal replacment with, zsh as my shell configured with oh my zsh and the agnoster theme with Sauce Code Powerline font.

my terminal

In some cases you just want to open a file in the current directory e.g. previewing an image or open a HTML file in the browser. Just type

open myimage.png

to open a file with the registered default program for this filetype.

You can also specify the program you want to use for opening the file. In case Chrome is your default browser but you want to open a HTML file in Safari type

open -a Safari index.html

Opening an URL is as simple

open http://www.google.de

To open a directory in Finder type

open .

to open the current folder or specify the folder you want to open

open images/icons/svg/

Opening a file from the command line is as we can see as simple as it should be.