Donnerstag, 18. Januar 2018

beyondtellerrand 2018 Munich

For the first time ever beyondtellerrand (https://beyondtellerrand.com / @btconf) came to Munich. Munich is the third location after Düsseldorf and Berlin where Marc Thiele (@marcthiele) holds his famous event.

The only reason I was aware of that was that my former colleague and friend Francesco Schwarz (@isellsoap a.k.a. the creator of the Specificity Visualizer), who I already joined for beyondtellerrand 2016 in Düsseldorf, pointed it out to me. So we both decided to go there.

The venue was located in the Künstlerhaus directly in the center of Munich next to the famous Karlsplatz. A lovely location with an inspiring atmosphere.

As always the event was comped by beyondtellerrand's DJ Tobi Lessnow (http://www.tobi-lessnow.com / @tobilessnow). For those who have not been at the conference yet: Tobi captures text portions during the talks and then arranges them in his DJ mix during the following break. Really a great experience especially with the passion and dedication Tobi is showing during his performance.

The conference videos are published on Vimeo and Youtube, currently (Jan 18th) only six of the Tuesday talks are online on Vimeo, but I am sure the rest will be posted soon.

Day 1

Sacrificing the Golden Calf of Coding - Chris Heilman (@codepo8)

This was an entertaining opening talk about not only the past but also the future of coding. Using his own life as an example he illustrated how people evolved from hobby coder to professional programmers and how this was reflected in their code. Hobby coders just try to get things working and make the code fast but very very clunky and hard to maintain. But the more people code or a living they have to start worrying about reuse, modularity and maintainability and usually the absolute maximum performance is not the primary concern anymore.

But there is also another kind of evolution going on. In the beginning people wrote code in crappy editors like Notepad, no IDE or anything, installations where done manually etc. Over the years tool support became better and better and now we have systems that can do simple tasks, generate code from templates and handle boring day to day work. Chris emphasizes that people should use the tools we have to their full extend, let the computers and algorithms do the boring and repetitive tasks. We should be creative and innovative, create new things by leveraging what the technology provides us with now.

Just because things where hard in the past, the don't have to be hard forever.

SVG Filters: The Crash Course - Sara Soueidan (@sarasoueidan)

Seriously if you ever need an analogy for drinking from the fire hose, this talk is what you are looking for. Marc Thiele's introduction was more than fitting: "She talks fast and knows a lot" ;-)

Sara gave us an impressive overview over what you can do with SVG filters, from rather easy things like creating drop down shadows to creating your own textures using simple effects like feFlood or complex ones like feComposite or feTurbulance. I was really impressed with what the browser can do without the need for imaging tools like Photoshop. 

All examples where explained by looking at the actual code that Sara walked us through step by step.

Was very interesting but when you watch the video, maybe try to play it at 80% speed :-)

Interactive Email - Mark Robbins (@m_j_robbins)

When I read that topic I was like "Ugh". There are few things I despise more than flashy html emails. And tbh, that is more or less what Mark is building but to be fair, the use cases he described seem sensible and obviously help his customers.

One example is something that a lot of us can surely relate to. You are on a shopping site, add stuff to your cart but then get distracted and forget about it. Now the site can send you an email, listing your cart and also adding the option to complete your purchase and even adjust the amount of items in your cart before doing so. All of that without ever leaving your email client.

There are a few challenges when you do something like this. For one email clients are incredibly diverse and testing for all combinations of email client, operating system and device is impossible.  Also you can't use javascript in those emails so instead everything has to be done using css.

This results in really creepy css selectors, e.g. selections are always implemented as radio buttons so you can use the "checked" attribute in your selectors and multiple radio button elements can be joined in selectors to then style other elements as desired.

The results are indeed impressive considering how limited the available options are and even more impressive was the demonstration of the "Wolfenstein 3D" shooter within an email using only css for the application logic. Okay, it was pretty buggy and by far not a real shooter but it is still an accomplishment.

From AI to Robots, From Apps to Wearables - Let's Design for Everyone, ok? - Robin Christopherson (@USA2DAY)

This talk was composed of rather large amount of videos that Robin strung together explaining certain aspects concerning accessibility of technology in general. What I liked was that he did not focus solely on the accessibility in regard to people with disabilities but also other impairments both permanent and temporary.

Robotics in our Everyday Lives: A Product Designer's Perspective - Carla Diana (@carladiana_)

Carla introduced us to the topic of social robotics, meaning research and projects on how robots can not only assist us in our everyday lives but also provide an interface to interact with them like a social or even human being.

A really cool example was the robot Poli that assists nurses in a hospital thus giving them more time for their patients. This robot is designed to vaguely resemble a human with a head and a torso, reacts to voice commands and replies to them. I think this is a great example of how cool tech can directly improve quality of life.

Another project of hers was the design of the robot Simon that is able to express emotions using basic mimics and is also able to react to his surrounding.

The talk was filled with short clips showing different robotic and interface design projects and I highly recommend to check out the video once it is available. 

The Internet of Natural Things - Simon Collison (@colly)

I must admit, I have a hard time summing up this talk since Simon touched various aspects of how nature and technology can be combined. On one side we have the research aspect where animals are tracked using e.g. chips so that researches can track the movement of birds, whales or other animals. Highly related to that is also how data mining techniques are used to analyze data gathered from those animals that is usually not limited to their GPS coordinates but can contain vital signs, environmental influences and many more.

On the other side you have apps or other pieces of technology that allow you to improve your experience when you are outside in "the wild". One example are nature guides that allow you to easily determine what animal you have just seen or even what bird you just heard by just sampling it's song.

But for me his basic message was that we should take a step back and try to appreciate nature more, to enjoy it fully and to take the time necessary. He underlined his message with stunning images and personal stories.

His last aspect to this topic was that we should also try to design our applications and even operating systems so that the allow for a more natural or intuitiv usage. For example a mobile device could sense where you are (home/work/gym/park) and give you simple access to apps appropriate to the current environment.

Even though the topic itself feels a bit esoteric to me, I still think there is a lot in it that we should think of more. It sure does not hurt to appreciate and actively experience nature more.

Sho Ha Hito Nari: Brushes, Strikes and Reflection of Self - Aoi Yamaguchi (@aoi_gm)

Calligraphy is, like most forms of art, something that I never really understood. And it would be a sham if I would claim that now this is totally different. I guess I am just a bit too ignorant to really appreciate art. 

But what I am able to appreciate and be truly humbled by is the incredible amount of dedication, practice and discipline that Aoi conveyed to us during her talk. I had no idea on the countless hours of not only practice but also preparation someone has to go through to become a grand master in this form of art.

Let alone how much patience is required to properly choose and prepare the ink for a painting, the incredible amount of different brushes and their uses. I also had no idea that ink blocks (I did not even think of ink as blocks until then) age over time and thus develop a unique character that also influences the paintings.

Evening Get Together

As usual the first conference day was closed by the traditional get together with free drinks. We had a few nice chats with different people including Marc Thiele (@marcthiele the boss himself) and a friend of his, Björn Odendahl (@nail7), who incidentally was the designer for the beyondtellerand shirt of 2016. 

Day 2

New Adventures in Responsive Web Design - Vitaly Friedman (@smashingmag)

First talk after drinking night, so we should be of to an easy start, right? Yeaahh... not on Vitaly's watch ;-)

This talk covered most of the topics on what you should consider if you want your website to be fast and responsive. It started of with the usage of compressions like gzip, zopfli or brotli. Then went to images and how you can speed up your website by using smart features or tricks, like responsive images, progressive jpegs. An interesting side note is, that it can be sometimes better to use a large image with low resolution and then have your browser to display it at a smaller size rather than using a small images with regular quality in order to safe bandwidths.

The second big section were, of course, webfonts and how they should be used and what dangers lie within when fonts can't be downloaded (browser timeouts etc.) Vitaly illustrated the different strategy options for webfont loading including fallback fonts and the optional attribute for the font-face annotation.

The last part covered the dreaded third party scripts. It is important that you understand what scripts your site is using, where they are hosted and most importantly how your site reacts if those scripts are unavailable. To find out more about that you can create request maps and use blackhole testing. It is also good to encapsulate those scripts in e.g. an iframe (even though most people hate it) or you can try to use SafeFrame.

Radically Accessible Internet Applications - Marcy Sutton (@marcysutton)

Another talk concerning accessibility in web applications but this time with focus on how you can a) find out where your app lacks accessibility and b) how to implement it.

Implementation is usually done using the various aria attributes and proper focus handling with the help of the inert attribute.

To find issues you it helps to navigate your application only with the keyboard as this is what screen reader users will do. Also activating voice over can help you find issues as well as the voice over router that gives an overview of all voice over portions in your application. Another great tool is the browser plugin aXe-Coconut that can find accessibility violations. Additionally aXe-core can be integrated into your build process to run tests on your application so find such issues on your build server.

Why Fast Matters - Harry Roberts (@csswizardry)

Why fast matters? Well, the obvious answer is money. Faster sites generate more revenue, reduced traffic saves bandwidth and thus costs. Easy, isn't it?

Easy yes, but not the whole truth. If we want to have a truly inclusive web we also have to make sure that our content can be accessed by as many people as possible. That also includes those in the so called third world countries and uprising economies. One major issue these countries face is the lack of high or even regular speed internet access. 

Many people in the world have to use 2G connections or even worse. For those a lot of websites that we use daily and take for granted are hard or even impossible to use. Harry shows us numbers on how many people are actually using mobile devices with such bad connections and also ways how we can test our applications on how they behave in such circumstances.

Tools like dareboost or speedcurve can analyse your website using different connection types, origins and stability parameters. CharlesProxy can be used to effectively throttle your device's connection to simulate access from e.g. other countries.

This talk summed up a lot of interesting aspects about website performance that go beyond our usual scope and is therefore highly recommended.

Data Sketches: A Year of Exotic Data Visualizations - Nadieh Bremer (@NadiehBremer)

Data Visualization is a virtue of it's own and I am usually perplexed by the results those people come up with.

Nadieh spoke about her insights and learnings from the past year of visualization projects showing the amazing results as well as the steps that led to them.

It was also interesting to see how and where you can find the data you are looking for but also what weird kind of data some people are gathering, e.g. all words spoken in the LotR movies by each character. I suggest you watch the video that explains the coherences way better than any summary I could put here. It is really worth watching.

A Tinker Story - dina Amin (@dinaaamin)

As I wrote above, I usually don't get art. But this one, this one is really cool. Maybe because dina does not consider herself an artist. She told the story of a young woman from Egypt that started to do what she like and by leveraging the internet coincidentally becomes famous.

The short description of what she does is simple. Take things apart, look at the parts, recreate something new from them and put all of this in a stop motion movie.

Sounds boring? Check out her video or look for #tinkerfriday You will not be disappointed. When I saw the first movie I also thought "so what?" but only until my jaw hit my knees..

Why Beauty Matters - Stefan Sagmeister (@sagmeisterwalsh

Okay, last talk of the conference. Traditionally a rather funny but still insightful and informativ talk. Stefan explains the concepts and misconceptions of beauty in the context of architecture. This one also relies heavily on the images and videos used. So it would be vain to describe it here. 

I had quite a few very good laughs and it was great closing talk.  

1 Kommentar: