Beyondtellerrand 2023 Düssldorf

WACOM Warm-Up

As last year we start off with the lovely people at WACOM who indulge us with tasty food and refreshing drinks. Toying around with their awesome products gives you a good impression why they are so well renowned in the graphics ecosystem. It was a bit sad we did not have a talk there like last time but still a great way to get into btconf mindset.

Day 1

Back at Capitol Theater once again. Even though I am only here once a year it feels strangely familiar. Tobi Lessnow aka Baldower is back at the turntables with his unique sound. We have our transcription service as well (even transcribing song lyrics) and the fabled Twitter wall. Or wait.. This time the wall also shows Mastodon messages! Same, same.. but different :-)

Little anecdote: Two of our little group of four only realized on Sunday evening that they did not actually buy tickets. But the great staff around Marc did check and were able to squeeze them in (door price of course, but still). This resembles the special effort made at the conference series that makes it feel simply special. Thanks a lot!!

This Website Is under Construction – a Love Letter to the Personal Website - Sophie Koonin

The title here is pretty descriptive. Sophie make a lovely plea for the revival of individual websites. Nowadays most websites look the same, built by the same tools and often for the same purpose: to make BU B6money.

Social media allows you to meet people and to generate content for them. But it comes at the cost of creativity (facebook pages e.g. all look the same) and also loss of control over your content.

But why do we not make fun/individual sites for ourselves anymore? Sophie takes us on a trip down memory lane starting with the first websites displaying static data evolving to hosted services like geocities and the changes brought on by web 2.0 and social media like myspace. 

In the end the web has become more about the consumers and how to please them than about the creators and why they build things. Sophie tries to encourage us to build things that we care about, that might be pointless or only concern a small group of people as long as we fun making it. Be yourselves, be creative, be you!

Once again a great starting talk setting the spirit of btconf. Thank you Marc but most of all thank you Sophie!!

Mapping Typography - Scott Kellum

Often a webpage is regarded like a 2 dimensional sheet of paper and for a specific viewport this is indeed true. But a website is much more than this, the viewport can have different heights or widths or is affected by other settings like color modes. All of this make a website a mutli-dimensional object and as a result stylings need to take this into account making the task of a consistent style for all variations and permutations a complex and challenging effort.

To tackle it one requires a system, a design system. But how do we start with that, what is important to consider and what tools can we use. These are some aspects that Scott tries to cover in this talk.

We start out by how a font is usually designed. Common practice is to start with the letters H O D n o p which give a good impression how a font will look overall as they cover general balance, roundings, straights and the combinations of those. Also for each letter you need to create different weights and styles (like italic or boldness) resulting in a multidimensional set of letter variants. 

Unfortunately it is not enough to create a set of nice looking letters, in the end all the letters in a font need to go together, for which font designers use words like Handgloves or similar to make sure the overall fit works well.

Once we have a well defined font the next challenge is to apply it properly in the actual contexts. As an example Scott shows how newspapers use heavier fonts for shorter headlines and lighter for shorter ones. It is also important to adjust other properties like line height depending on certain attributes like width of the enclosing container.

It can become very complex and confusing to define rules or media queries for all these combinations and sometimes it is even impossible with todays tools to achieve a concise design. This is where a new shiny toy comes in: CQI

It gives you the ability to react on the inline size of a container and use this in formulas and animations. With that you can implement various behaviors of font properties to provide consistent and sensible styling throughout all of your website's dimensions.

Since this is not supported in browsers yet Scott showed us some rather hacky workarounds using e.g. css animations to achieve similar effects.

The actual code details were glossed over a bit too quickly for my taste so I had a hard time following but I am sure if you watch the video it will all make sense to you.

ET TU, AI? - Mario Klingemann

Mario is a recognized and award winning artist who uses AI and other generative techniques. Throughout his talk he presented various of his projects that use different algorithms and ways to combine data achieving impressive and interesting results. One example being music used as input to dynamically morph different portions of a set of images. 

For Mario, AI provides new ways to view and combine existing data but on the other hand he enjoys getting inspiration from the real world. As an example, whenever he is in London he tries to find his way to the Thames on low tide and go mudlarking. Which is strolling through the muddy river bed to see what can be found there giving him new impulses.

The new and upcoming AI tools enable everyone to become a generative artist but it takes the creative mind of people like Mario to come up with new and unique ideas using these tools.

Describing all the projects Mario presented would not do them justice so I recommend simply watching the talk or at least looking up some of his projects like Archive Speed Dating, the Uncanny Mirror or Botto.

The latter being an AI creating digital art and selling it to sustain its own infrastructure costs and so becoming a self-sufficient artificial entity (or at least almost). Up until now Botto generated about $2.5 Million of which nothing goes to Mario but is solely used for Botto's expenses. 

瞑想と書： Meditation with Calligraphy - Aoi Yamaguchi

Aoi is the daughter of a calligraphy master craftswoman and got enrolled into a calligraphy school at the age of 6. Later on she incidentally mentions she also started learning the piano at the age of 5 (let that sink in for a moment...). At the age of 14 she achieved the rank of master student. As much as we are aware of the disciplined upbringing common in Japanese culture, it still impresses me everytime I hear of such examples.

Throughout her whole talk Aoi keeps coming back to the values instilled in her during her education. Qualities like discipline, perseverance and patience being some of the most important ones. 

On the other hand she explains what meditation means to her and where meditation and calligraphy either complete or overlap with each other. Mediation helps her to calm down, clear her mind and focus on the drawing she is about to perform. Also the process of preparing her ink is a small mediation in itself and the list goes on and on.

Aoi also showed us videos of some of her performances emphasizing the traditional aspect of calligraphy and importance of those related traits.

I found it very interesting to see what kind of passion and determination goes into traditional calligraphy art while from the outside this is hardly noticeable. 

How to be an Ultra Artist - Gemma O’Brien

This talk started with a nice touch as Gemma added pictures from her morning run to the beginning of her presentation. During her whole talk she managed to radiate energy and positivity which gave off a lovely vibe.

Already in her early years Gemma loved to paint and always embraced new tools or technologies to create content be it a camcorder or her first computer. Being a successful student she first enrolled into law school but soon decided to drop out and study graphic design instead. It was then when she fell in love with printing and lettering leading her to typography. During her studies she created a video in which she covered her body in different letters that somehow found it's way into a German magazine and eventually led to her being invited to speak at a conference despite never having actually worked in the field. But it all worked out fine and somehow got her to work for global companies and become rather successful.

After a while she found herself drawn back to her roots, working with letters. The talk featured many examples of her work and those alone make the video worth watching. Being driven to find new ways on how to work with lettering she discovered calligraphy and experimented with the basics. At one point she got hired to create several hand painted, large scale billboards and simply loved working on such a big scale.

She was downright possessed with drawing and so started drawing on the sick bags on her many flights she had to go on. This got worse with the uprise of tablets, because now she could work anywhere anytime. Over time Gemma was spiraling into a burnout and to get out if she had to return to her initial, analog work process.

To help her, Gemma created a visual diary, a huge physical book where she keeps all of her sketches and even print outs of her drafts. This allowed her to focus again and slow down. Then the pandemic hit and she found herself more or less locked up in her studio for a year. So she finally got into running, first a few kilometers increasing more and more over time until she ran half and even full marathons. But not enough with that, she set her mind on running an ultra marathon and bought a book about it to help her prepare.

Though for some reason the event got canceled and Gemma today realizes that this was a very good thing. But the contents of her ultra marathon book helped her to understand some of the issues she was facing in life and so she retargeted her goal from becoming an ultra runner to becoming an ultra artist. Someone who keeps on creating and being creative over and over again. Only time will tell if she will achieve this...

In my opinion, an inspirational and energizing talk, worth watching!

Goats and cars: beyond failure - Thomas Thwaites

Last talk of the day, everyone being pretty knackered already and a title that leaves you a bit confused. Sounds about right, doesn't it?

I have to be honest, at the start I had absolutely no clue where this was headed or what Thomas actually does ;-)

From what I understood so far he is a maker, a creator who tries to make weird or even seemingly impossible things become reality.

At the start we saw a few of his past projects which were interesting and amusing. Then he kind of switched pace, describing how he felt that as a maker he should at least once make something from scratch and his decision was to make… a toaster.

But not like one would think as in getting like a metal case and the fitting plastic frames etc. No he started out to make steel. So we watched a video where he called a mine to get some ore and for the other components he was equally strict. Very funny to watch.

The next part was rather weird and I can't really say why Thomas made this project but he did..

The idea was how he could transform himself into a goat. We are not talking Halloween costume or cosplaying. He really investigated how his brain could be changed to become more goat like, what prosthetics he would need to walk like a goat and even how to enhance his digestive system to be able to live of grass and other plants.

He consulted legit scientists all over the world and put in a huge amount of effort. In the end he spent several days living among a herd in the Swiss alps.

I know this sounds super weird and it is. Just watch the video. It is a mix of funny, disturbing and fascinating.

After this he started to build a harmless car. So far he built a chassis out of a certain kind of wicker like wood 

I can't really explain.. just watch the talk.

Day 2

The 7 Traits of an Emotionally Fit Leader - Emily Anhalt

Before I start: This is THE must see talk of the conference. If you are going to watch only one talk (even though I would not know why) then this is the one to go for. It is funny, insightful, useful and simply awesome! 

Also when you watch (not “if” “when”!!!) make sure to watch it together with someone else (or in pairs if you are more people). Over the course of the talk there are short exercises for the audience that need to be done in pairs and they are worth it.

Emily has a doctorate in psychology and extensive experience in therapy. We start off with some basic concepts about mental health and how basically everyone has the one or other issue to work through in their lives. It is also important to realize that “not sick” does not necessarily mean “healthy” or even “fit”, that goes for physical and emotional fitness.

Emily did conduct a survey among 100 psychiatrists and 100 leaders in which she asked them how they recognize if the person opposite of them is “emotionally fit” and summarized the results as well as techniques on how to ascertain, ensure and achieve such a fitness.

I will only give short summaries of the 7 topics because if I try an extensive report I am bound to get things wrong, so once again: Watch the talk!

1. Self Awareness

One has to understand their own triggers and biases in order to be able to cope with them. Going into therapy can be a very useful tool here regardless if you are working through an issue at that moment. It is even better to train your emotional muscles as long as you are healthy just in the same way as it is with your physical muscles.

Keeping a journal and explicitly asking for feedback are also good ways to increase your self awareness

2. Empathy

Empathy means to not only understand others but to also relate to their feelings, otherwise it is “just” sympathy.

Here she introduces the tool of an Emotional Fitness Survey in which people can give hints to their friends/coworkers how to react in certain situations.

3. Mindfulness

In order to grow we sometimes need to accept discomfort instead of avoiding it. Otherwise we risk getting stuck and then ending up in even worse situations than the ones we tried to avoid in the first place.

4. Curiosity

In case of criticism we should learn to accept it and  be curious on how to improve instead of getting defensive. To help with that it is necessary to build up a certain self confidence. Here she suggests the tool of a self-esteem (team) file.

5. Playfulness

If someone approaches you with an idea, say “yes, and” instead of “yes, but”. Dare to play around with ideas, ignore constraints, think big e.g. start meetings with ice-breaker questions. 

In Emily’s slides is a link to 30 of her favorite ice-breaker questions and one is used in one of the aforementioned exercises, so try it :-) 

6. Resilience

In order to become more resilient in the face of critical issues it can help to learn not to worry about things that have not happened yet and/or things that you have no control over if that will be an issue one day. Be confident in your future self to handle these things when they happen.

Share with others what your warning signs of becoming burned out are, so that they can give you feedback on that and help you react before it hits you.

7. Communication

It is better to communicate things clearly instead of suppressing issues and then being even more upset if the other person does not notice that something is wrong. In her company and even her relationship they established the use of remojis. If you do not know what they are, watch the talk.

This talk was the perfect start for the second day and the slot was the perfect fit for such a talk. Brilliant matching by Marc!

Typography for Everyone - Tobias Kunisch

Tobias has been involved with fonts for a very long time and took us on short time travel on the evolution of digital fonts. In 2010 IKEA changed their font on the yearly catalog to Verdana for the sole reason to the same font for their online and offline presence. At that time there was only about a dozen web fonts available that could be used reliably so that is why the print version had to be adjusted.

In  the early days of the web there were not many options, some people used js hacks like sIFR to replace fonts dynamically. But then HTML5/CSS3 came along and introduced the font-face directive. Finally fonts could be embedded in websites just like images. So all's well that ends well, right?

Not quite: Even though now from a tech perspective fonts could be used easily there was still the issue of licensing. After all, even font designers need to eat, or so they claim. And so the issue was now to find a font that you were actually allowed to use.

This bothered Tobias pretty much and he was dreaming of a world where there were free fonts for everyone easy to use. At that time he started his job at Google and met 2 colleagues who were working on that exact issue as part of their 20% project. Tobias joined them and this project is now known as Google Fonts!!

But still, there are some issues with fonts. For one there are many many many glyphs out there and most fonts only contain a small subset of those, e.g. the Latin glyphs (just like the ones you are reading right now). But there are so much more, to be more precise all those that are part of the unicode standard. So in order for a font to be truly useful to everyone it should contain all these glyphs. Noto is such a font that is meant to address this issue and is kept up to date with all additions to unicode.

Even though there are a lot of fonts out there catering for various different needs, e.g. fonts helping people that suffer from dyslexia or have very bad eyesight or fonts that need to render a certain letter differently depending on where in a word that letter appears.

As if that was not already a lot to take in, lastly we Tobias covered the topic of Variable Fonts and Color Fonts. These fonts can be defined in a highly flexible way with arbitrary values for things like weight, width, length of ascending or descending glyph parts and even have decorations depending on their context or different coloring in single parts of a glyph. 

Modern CSS Layout is Awesome! - Michelle Barker

Oh yeah, fasten your seatbelts, the techie train is about to shift into the next gear.

Where Tobias left us with a nice push down the tech path Michelle took over and off we went.

She showed us not just what nice and shiny tools modern CSS has in store for us but also how to use them with some lovely demo coding. At first we took a short glance into the past about floating divs, flexbox and the arrival of grid just to then dive into new and more advanced tools.

There is no use to describe it all you need to have a look at the talk but as a teaser: You will learn about aspect ratio, object fit, gap, small/large/dynamic viewport units, overlaying, inset, grid, subgrid, intrinsic sizing, feature queries, has(), animated grid tracks, container queries and more!

You just gotta love this!

Animating the Impossible - Cassie Evans

Well, I might sound like a broken record here but again we get into deep technical waters this time about UI animations with Cassie.

She showed us what cool things can be done using tools provided by gsap when animating objects on websites and what issues of traditional approaches are solved by them. One issue is that in order to use an animation you need to define the boundaries in the same unit, so e.g. combining a px value with the ‘auto’ keyword just ain’t gonna cut it. Or when you have to deal with objects using different positioning directives.

She even threw in some biology explaining to us, why in the peripheral view we mostly just recognize motion and how that should be factored in when creating user interactions.

Another funny and insightful talk that should go on your watch list as once again a transcript just is not enough.

Side Quests: Satisfy Your Distracted Self - Hugh Elliott

Oh boy, everyone’s head is dizzy from all the tech input before and we are already for a new topic. But Hugh gave us a nice change of pace, telling us the story of his early professional life and how he became a tinkerer and a creator. What motivated him and how that impacted his life.

If you want the bare facts then it could be summarized like this: Hugh created a rainbow colored led rod and used that with long term photography to create pictures of rainbow curves in lovely sceneries and even got to work on the pride campaign of WWE. 

Sounds rather drab, doesn’t it? But it wasn't! This guy is a great speaker, funny, a bit ironic, sometimes a bit below the belt, everyone had a blast. And if that was not enough he even managed to raise money for LGBTQIA2S+ charities on the way.

Start the video, kick back and enjoy!

Past Present Future - Eike König

Okay, last talk of the conference. Expectations are high and the previous talk might be hard to follow. As a heads up due to the schedule being delayed and our train leaving earlier than we would have liked (was unfortunately the last option to bring us back to Munich at a sensible time) we had to leave the talk early after about 30 minutes. 

We start with a somewhat artsy music performance which, I must honestly say, I did not get. Followed by a rather dark reminder that creativity can also be used to create destructive things like the atomic bomb. Very true and very discomforting. I braced myself for some deep and meaningful content.

But after that the presentation was more like a stoic stringing together of Eike’s work in advertising and his art studio presented without much passion or joy, glossing over most things, skipping many slides over and over with comments like “that doesn’t matter anymore because it is in the past” but still emphasizing all the things he and his team did just to diminish them again immediately.

At this point we had to go and I really hope this talk will be uploaded so I can check the end and see if there is some iconic twist that explains everything and proves that I am just to stupid to understand what Eike was setting up.

One thing I feel the need to point out though is that during the pandemic when there were not many jobs for him and his employees he started his 50/50 project. Meaning that he sold his work for half the price with the requirement that his customers spend the other half (or maybe just some of it, I can’t remember at the moment) on charity or buy things from other artists so that everyone gets a share and can make a living. This I consider a great idea and a nice touch.

Summary:

Again another great conference with the lovely Marc being his charming self and setting a great atmosphere once more. Apart from the last talk the second day blew my mind, the first day was good too, but just not quite at that level overall.

One thing you have to keep in mind if you consider going next year (which you should) there will be delays. Not one talk started on time, so it might be a good idea to travel back on Wednesday if possible. 

I really hope all talks will be available online (youtube) as there are many that I would like to share with colleagues and friends. Until next time!

Beyondtellerrand 2022 Düsseldorf

After the involuntary hiatus of the last years, it was once again time to join btconf in Düsseldorf!!

The tireless Marc Thiele once again put together a very promising line up and considering the last times
I expected this one to be a blast as well (no pressure (™)).

At the time of writing the videos are not online yet, once they are uploaded I will add links to them. In the meantime you can check out earlier talks on their youtube channel.

Warm-Up at Wacom

Like, I think the last time in 2019, the lovely people at Wacom did host the traditional Sunday evening Warm-Up. This time though in their new fancy gallery. Apart from free drinks and tapas we got to enjoy the first talk of the conference.

Chicken Sexers, Plane Spotters, and the Art of Sketching - Mike Jelinek

The title seems a bit odd at first but soon enough Mike did enlighten us. The term "Chicken Sexers'' describes people that are able to tell the difference between male and female chicklets. That is something that seems impossible at a first glance after all all chicklets look awfully alike. Nevertheless there exists a special zen school in Japan where a master teaches you to distinguish them by simply letting you make a decision and then telling you if it was correct.

This is a concept called unconscious learning where you do learn to perform a certain task but without actually knowing how you do it. Yes this sounds very weird but it seems to be a thing. In the same way "Plane Spotters" did learn to recognize if an approaching plane did carry bombs or not. Seemingly slight variations in how a plane did change direction or react to maneuvers do allow for this distinction but without a chance to put a finger on it.

After this Mike did elaborate a bit more on the neuro-scientific background of this phenomenon touching on cognitive maps, convergent and divergent thinking as well as externalization of thinking which I will try to summarize.

During our day we receive a lot of unstructured chaotic data which our brain subconsciously processes and somehow structures resulting in cognitive maps. These maps allow us to approach tasks in a new way but we cannot access them willingly.

What we are used to is convergent thinking which means we focus on a certain task and try to tackle it in a logical and structured way. Basically how we learn to perform our day to day tasks throughout our whole lives.

Divergent thinking on the other hand uses cognitive maps to give us new and creative insights on a task or a situation. To tap into this it helps to do something else like going for a walk, start to cook or let your mind wander in some other way e.g. sketching which brings us back on topic.

Actually this is nothing completely new, we all know the effect when we are stuck with something, put it on the side and suddenly when doing something completely unrelated we get a new idea because we let our mind take advantage of cognitive maps. This also shows that our cerebral regions are not as separated as we thought for a long time, instead all areas of the brain are connected to each other which explains that motoric stimulation can help with intellectual tasks.

The term of externalization of thinking on the other hand describes how it helps us to visualize the things we work on. A simple example here is when we write down a complicated calculation or when we think about furnishing an apartment how we draw a plan, cut out pieces of cardboard to move around.

To sum it up, Mike took us on a short excursion into neuro scientific discoveries of the last years and how these can help us to actively work and improve on our creative skills. After all creativity is not something that is merely gifted to one by genetics but a skill that can be honed and crafted.

As a last topic we discussed how already available tools like AI or VR can help us with this. VR can be a highly efficient tool to visualize things and this helps us to externalize our thoughts or where AI can be used to assist us with unconscious learning. An example he brought in was art in general. It is very hard to decide why some art is good while others are not. It is very similar to the "Chicken Sexers", some authority decides if your decision is right or wrong but without telling you why. So you could train an AI on some forms of established are which then in turn can categorize other art and thus educate you on this aspect.

I would say this was a good start for this year's btconf. An interesting topic presented in a refreshing way by someone who not only clearly knows what he is talking about but also shows his passion for the topic at hand.

Monday (Day 1) 

Back at the capitol! Things again start to feel as they used to. Nerds bustling around the slightly surreal lighting and Tobi Lessnow already in action on his turntables. For those not aware Tobi is THE btconf dj being at every event and famous not only for his unstoppable enthusiasm but also for incorporating snippets of the talks into his music.

 

 

 

 

Programming Playgrounds - Linda Liukas [Talk Profile Web Twitter Insta]

Linda is a children's books author who tries to teach not only the basics of computers but also IT and the internet in general in a new and creative way suitable for younger children.

But she doesn't stop there, she teaches children using all kinds of new and interesting ways and tools so children can learn what algorithms and boolean logic are but in a much more intuitive way.

A basic premise in her work is the attempt to reconnect creative thinking and imagination with logic and scientific analysis. For this it is important to have what we call poetry in spoken languages also in the world of programming languages. Also she explains how important it is for children to learn things with all their senses and not just from a textbook. Examples were a play where she was playing the computer processor that was commandeering the children who "were" the ram or hard drive or other things. Or simply using candies to teach a simple bubble sort. That way the understanding gets ingrained into the children much better and they memorize it very strongly.

A more advanced example was to let them create a youtube video, including planning it, creating tags and subtitles. So they learned each step and also what it is for and then could recognize e.g. where on youtube different algorithms were used (recommendations or typing predictions). All this is also meant to help children not to adopt our views and especially fears of technology but let them experience it without bias sso they can enjoy and utilize as good as they can.

There were many more stories in this talk which I can't all mention here but one was very fascinating as it emphasized a different aspect of creativity and computers. Mushrooms can act like a kind of semiconductor, so there are people trying to programm fields of mushrooms and utilize their natural sensors e.g. reacting to the behavior of animals around them. So it might be able to use programmed mushroom networks to monitor the state of forests. BAAMM!!!

If I was to summarize a main take away from this talk then it would be: Do not be afraid to be creative, think outside the box and see the world with the eyes of children.

All this is very hard to describe in such a summary and I am afraid I will not be able to do justice to her. So once the video of the talk is up, I recommend watching it.

The Big Picture - Tim Kadlec [Profile Web Twitter]

Websites use images to convey emotions to the users and create a kind of connection with them. This means they are an important part of any online presence.Tim took us on a tour about image loading and performance implications in modern web design.

To determine the performance of a website you can use various kinds of metrics. One that was new to me is LCP (Largest Contentful Paint) which determines how long the largest (in this context meaning “most important”) part of the content takes to be painted. Usually these are images, either as background or as content e.g. showing a catalog item..

Having a short load time on such assets is important but often they are among the last items to be rendered.

Tim explained a few techniques to increase this performance and also gotchas and caveats of each which I am trying to sum up here.

Due to the fact how browsers work (loading js, css, html, executing js, parsing css etc) images defined as background images only in css the information that an image has to be fetch is only available very late to the browser and it is even later that the browser can know the image needs to be rendered.

A way to work around this is to tell the browser that we know this image exists and is important. A first start is to use the preload tag inside a site’s header section. That way the url is known to the browser way sooner and it can be loaded sooner, or rather could. But because there are lots of other resources like css/js and maybe other images the browser can’t decide which one is more important.

This is because the tag does not convey any information regarding priority. You can try to move the tag up in the header section but this is causing all sorts of other issues without helping much.

So in come priority hints, a rather new feature available in Chrome based browsers that allow to indicate to the browser that this resource should be considered a bit more important than it normally would.

For regular images there is a different common issue for delayed loading. Many js libs use a lazy loading mechanism which usually involves setting the src attribute of an image at runtime. So the browser has no chance of preloading anything until the corresponding js code is fully downloaded and executed.

Here the new loading attribute can be used to define eager or lazy loading on markup level and let the browser handle it: Markup is your friend!

After this Tim gave a comprehensive overview over the different default loading priorities applied by the various browsers and how things like viewport or connection speed can affect these.

But we were not done yet. There are still examples where all the above still does not give you the speed boost for your LCP that you would expect. This can stem from using a different domain to host your images than the one your website is hosted on, e.g. when you are using a hosted image service.

In this case the browser opens a new connection to that domain once it has decided it has to load that image which again takes up quite some time. To avoid that you can use a rewrite mechanism to use urls relative to your domain in the markup and have that path then being redirected to your external service. For the browser this is transparent and can use the same connection.

In traditional on premise setups this happens with something like an nginx performing the rewrite. When you want to be more cloud based this is usually not an option. Edge Computing to the rescue!!!

What is Edge Computing? In a nutshell (and probably highly over simplified) Edge Computing allows you to run js code on CDN hosts, meaning you can rewrite the urls directly on the CDN node closest to your customer that also handles the delivery which sounds very neat.

On a closing note Tim examined the issue of performance measurement in general. Most tools are built on tools made by Google satisfying metrics created by and for Google. And also LCP is a metric only available in Google based browsers.

In order to have similar performance measurements in other browsers you can employ javascript techniques which Tim showed us a few examples of. More important is the realization that you need to verify your performance measurements in all browsers and not only in Chrome.

To paraphrase Tim: It is WEB performance, not Chrome performance.

As you can see from this wall of text, it was a rather detailed talk touching on a lot of topics and at least to me was not only very informative but also made the tech nerd in me smile.

(Lunch-Time Session) What We Can Learn from Hacking Multiplayer Games: Understanding and Cheating in Distributed Systems - AOE Group [Web Twitter Insta]

This was a short but very nerdy talk about what kind of attacks you can or at least in the past could use to change the behavior of a computer game beyond the expected boundaries. It started out by changing files of an old solo rpg game to change the attributes of your character and then moved over to scanning the network traffic of a server based multiplayer game to understand how that can be modified to actually inject data.

Afterwards he explained how some people created explicit cheat challenges for people to find a way to complete specific tasks in a game and later on he even created one himself.
Apart from learning new and creative ways to analyze systems this has also more “serious” benefits. All these techniques can and actually are used when targeting commercial websites and other large scale applications. So it is important to always look at your architecture, your protocols, your apis not only considering use cases, performance or maintainability but also security. Always ask yourself “How could this be abused?” and make sure to never blindly trust user input.

Bag of Spanners - Léonie Watson [Talk Profile Web Twitter]

Léonie Watson is a remarkable woman. I heard her speak at a UIConf a few years ago, also about the topic of accessibility, and it was a great talk. So I was kinda hyped about this one and I was not disappointed.

It was a bit of a pity though that she could not be at the conference in person but instead dialed in from home. Which in turn shows her dedication.

As it turns out this was not so much a regular talk but rather an excursion on how different levels of accessibility on websites impact the experience for screen reader users.

At the start she emphasized the importance of accessibility tools and how every developer and ideally also designer should know about and how to use them. An interesting tool in this context is the accessibility tree created as a logical structure by your browser analog to the DOM as it can help you understand how your website is represented towards screen reader users.

After this she showed us various examples of button or navigation mark ups at first in a minimalistic version rather unusable for screen reader users which then were refined more and more into complete working and accessible markups. It was really interesting for me to actually hear how the audio presentation did differ from the visual one, something that is very hard to anticipate when your perception is already biased by what you see.

Very much worth watching.

 

 

Graphic Storytelling - Noma Bar [Talk Profile Web Twitter Insta]

I seriously can’t describe the content of this talk. Noma “simply” gave us a looong tour through all his work of the last 40 years as a graphical illustrator and story teller. His images usually have two, three or even more twists in it that you only recognize over time.

Just watch the talk and be swept away or check out one of his many books.

 

Everything Breaks at Scale - Sacha Judd [Talk Profile Web Twitter]

Now what could this talk be about? Our guesses were from resilience in highly distributed web architectures to layout paradigms for overly complex website content. Boy, did we go off base there.

A quick summary would be: “Why do people get into conspiracy theories and why do they stick with them?”

Disclaimer: I am not totally sure I was able to follow all her reasoning but will try to repeat them here to the best of my ability. Should anyone notice something wrong or objectionable, please let me know.

For starters there are different kinds of conspiracy theories. From people who believe the government is out to get them to those who indulge in RPF (Real Person Fiction) meaning they make up or believe in made up stories about e.g. actors. A popular example seems to be the rumor that the cast from Lord of the Rings did actually have more than just a good time making the movies but also that secret affairs did start which are still ongoing and kept hidden for all those years.

What is it that makes such groups attractive to people? For one thing, it gives a sense of community, people with a common interest that over time become more and more your friends.

Another appeal of these groups seems to be a common nostalgia for earlier and simpler times where everything was at a smaller scale.

What comes with that is also common purpose. It is your “mission” to unveil whatever the subject of your specific theory is and maybe even save the world. And as a result the positive feedback and encouragement lets our body create dopamine which can turn into some kind of addiction.

So people need to create ever more and new content which receives more and more positive feedback the more far fetched the claims and proofs seem to be.

Conspiracy theorists may seem like harmless idiots at times, but ever since the march to the capitol of the US it is evident that they are dangerous.

But what should be done? What can be done? Here Sacha, in my opinion, made a bold move by asking for regulations and law enforcements. This seems contradictory to the usual plea for a free and accessible internet but her argument is that like with all forms of media, like newspapers, radio, television, there was a need for regulation.

But not only governments are required to take action. The large companies providing platforms for people to connect must accept their responsibility and not simply claim that they are just providing a platform and can’t be held accountable for the content. She calls this the “Illusion of Neutrality”. Something companies like Facebook, Telegramm, Google and so on have been clinging to since the dawn of time. Partly because their only metric of success is to grow and grow without taking into account what effects their ecosystems have on society.

Would that be enough? Clearly, no! We have to educate ourselves but especially our children to defy misinformation and manipulation.

The more often you hear/see/notice a claim or statement the more real it becomes for you. To counter that one should not just accept claims they hear but fact check them to make sure it is actually true the very first time you come across them. Also make sure it comes from a reliable source and to top it off, do your own research, challenge things. So in the end you can make informed decisions and have a solid base for your opinions.

If we manage to teach that to the generations to come we have a change to make this world a better place.

The Positives of Saying No - Cabeza Patata [Talk Profile Web Twitter Insta]

Cabeza Patata is a 3D modeling studio consisting of the married couple of Katie and Abel, who despite being a rather small company did work with several global players as their clients.

In their talk they took us on a tour about the ups and downs of their career, especially about the things they found saying “no” to did indeed help them regain not only control of their company but also their lives.

What is important to mention here and what they also did stress is that these were things that did work for _them_ in their current situation. It is not meant as an entrepreneur blueprint.

No to Representation Agencies

A representation agency is a company negotiating with potential clients on behalf of an artist and of course that company takes a chunk of money from the budget as their fee. Depending on the percentage that might actually not sound too bad considering they protect you from a certain hassle. But it does not stop there. There are also Advertising Agencies and Production Companies that might work together or approach you on their own.

So with each further company/person in between the actual percentage of the budget the artist gets becomes smaller and smaller. To make it worse in many cases it is not even transparent to the artist who is taking how much or how big the initial budget even was.

At a certain point Cabeza Patata decided to not buy into this system anymore and terminated the cooperation with their agencies. This meant going out on a limb for them as it was not clear how they will get in touch with new customers.

As it turned out their presence on social media was helping with that and shortly after separating from the agencies they did land a large scale project with Google.

No to being a traditional production company

The usual course of action after completing your first large projects is to grow and try to get even larger projects so you can grow more and so on and so on.

Abel and Katie found that this whole situation once the first big paycheck arrived did cause them quite some mental stress and distress. So they took a step back and realized that by staying small they were able to work more efficiently and have more direct and better communication with their clients.

No to the pressure of a permanent location

It is a common perception that having your own office means you made it as compared to a start up in a shared office space. So they did rent an office space trying to be accessible to the neighborhood in order to connect with them.

What did happen though was that the felt either like acting as tour guide when people came in or when they tried to focus on a project and thus closed their doors felt like shutting people out.

So there was no option that made them happy until they took a trip to the canaries and realized how much happier they were and that they could work from there. Living in a small rented apartment they started to work wherever they felt like it.

No hiding behind screen

As 3D modelers they spent most of the time working on digital projects but what actually got them into the field was the fun in making real things.

So they returned to their original values and started making real things again, learning new crafts. Allowing them make new art in other forms like stop motion movies or have their 3D models printed to then paint them which then in turn can be digitized again.

Basically do not get too comfortable with what you are doing, take a step back and/or learn something new and you might be able to enrich your business.

No to ponzi schemes

When the idea of crypto art took off Capeza Patata was approached to also auction their art over the various platforms.

As they did not really understand the concept in the first place they decided to first learn more about the system. It turns out that in contrast to the regular fine arts market the crypto art scene is purely based on speculation, lacking the cool down phases of the traditional market (a collector buying something to actually have it so the artwork is not available anymore). Those who participate actively brag a lot about how much money they make to make the concept appealing to others to join in.

It resembles a pyramid scheme where it is very likely that only the first few to enter will actually make money while the majority will lose their investments. So joining in would mean they would be making money on the back of others which just was not acceptable for them.

This combined with the inherent fluctuation of crypto currencies made this a highly unattractive idea. Adding in the fact that they had been insulted for not wanting to use said platforms sheds a very bad light on crypto art in general.

No to being secretive

There is no use in keeping your knowledge and experience to yourself. So they started to hold workshops, teach at various occasions and finally opened their own school where people can learn from them by using their own libraries for textures etc.

All of this did help the two to be not only happier but also more successful with their business.

Tuesday (Day 2)

Scaling CSS Layout Beyond Pixels - Stephanie Eckles [Talk Profile Web Twitter Insta]

Nothing to start a day like good ole nerd talk!!

In the early days of web design (or rather in the times when that hardly existed), fixed pixel sizes were fine as we had only a very limited set of screen resolutions and ratios and no mobile devices to support. Compared to today it was a very finite set of possible client settings.

Nowadays the opposite is the case and there is an almost infinite number of combinations out there defining the context in which our content is engaged with.

Steph’s topic revolved around intrinsic and adaptive design or rather how this can be achieved using modern css techniques.

To illustrate the differences she presented examples with old and new css directives in place illustrating how modern techniques can improve the layout of a website.

Since it does not make much sense to describe the different examples here I can just recommend watching the video. Maybe at 80% speed ;-) The talk covered the usage of functions like clamp, min, max, fit-, min-, max-content, grid, gap padding and margin as well as various types of units like viewport-height, frame ratio or character.

All of these allow for use with design token to further improve maintainability. If your day job or hobby requires you to do any kind of css, I highly recommend this talk.

Lost in Translation - Manuel Matuzovic [Talk Profile Web Twitter]

Hands down my favorite talk of the conference. Don’t get me wrong, the others were all great too, but this one was awesome! Funny, insightful, meaningful and it made you contemplate.

Manuel is working as an accessibility consultant so his job requires him to check websites and how accessibility can be improved which results in him reading a lot of awful code.

What he realized over the years is that most issues do not stem from complex frameworks like react but from simply bad html. One of his standard examples is a button that is not created using the semantic button element but instead a div that is styled to look like a button.

This omits semantics which are important for screen readers like Léonie Watson pointed out in her talk on the previous day.

In a lot of cases websites only consist of a few very basic tags instead of taking advantage of the full set of available semantically meaningful tags which often is also caused by designers not being familiar with how html works and the developers not being able to properly translate the design into a meaningful document structure..

What is even sadder though is that also websites of professional developers sometimes do not use proper tags despite the fact that these people HAVE to know about them which can only lead to the conclusion that they simply do not care about accessibility.

But with ARIA everything is fine again, right? I mean, what could go wrong with ARIA? Maybe, apart from slapping it on like gravy on dry turkey roast.

ARIA tags are often used incorrectly removing semantics or resulting in re-adding existing behavior of the proper html tag. So it is important to understand html and only resort to ARIA tags if there no native equivalent.

But why is it that html is often used in such a bad way? Isn’t html simple? Isn’t that what everybody is saying? Yes they are and no it is not!

Html has a simple syntax, opening and closing tags, maybe text in between and then optional attributes. BAAM, done!

The thing that is not simple is adding the proper semantics to a document for which you first need to understand the structure. This means not only the structure of what is visible in the design but also the logical structure behind it, that what a screen reader should use to navigate in an efficient way.

There are actually not a few more aspects covered in this talk but once again I have to tell you: Go and watch the video! You will have not only a few laughs but you will learn even more. If you can only watch one of the talks (which would be a shame and I would urge you to change that) then it should be this one!

Exclusive Design - Vasilis van Gemert [Talk Profile Web Twitter]

Despite the title we are of course talking about inclusion here. Though Vasilis follows a kind of different school of thought here.

Originally he tried to follow four simple principles. Consider all contexts your content is viewed,  be consistent, prioritize content and add value instead of nonsense. All of which sounds pretty reasonable. But upon further tinkering with it he started to question those principles.

In order to consider all contexts, should not first know all contexts? So that principal should be something like “further studying”. And if we do not know all contexts then maybe the other principals are not set in stone as well, so he wondered what happens when you do the opposite. Break with conventions, prioritize individuality over content and add nonsense?

To be quite honest I do not exactly recall all the reasoning on this part so I might have gotten some things here and you better double check the talk. But I am fairly sure I got the outcome correct.

To start investigating what contexts there are, Vasilis did work with blind people and watched them using websites to see what works for them and what doesn’t. His examples were a bit devastating. In one case a website was using ARIA tags all over the place and semantic tags to represent hierarchies which resulted in about 80 headline elements and 150 links. Making the site so complex that it was unusable for someone with a screen reader, especially people that do not use them on a daily basis, like artists.

What he did was the opposite of the things we heard so far during this conference. Creating a very very limited version of the websites without any semantic information but only very limited elements and structure. And this did help the users as many of them did not even understand why information like “navigation” or “headline 2” were read out to them.

This illustrates a different kind of problem. A lot of people invested in accessibility have a strong technical inclination, those of them who are blind use screen readers extensively and they know very well how to use them and what the information presented to them means. Many other blind people do not have that background and/or the desire to get acquainted with it. So maybe we have to adjust yet again to also include these people and break with conventions.

Something very cool that he made in the progress of this research are animations with audio descriptions. Turns out you can make the screen reader make something like sounds or even giggle. Which makes it more entertaining for the users.

Another thing Vasilis did talk about is how his students were creating devices or mechanisms to help people with specific disabilities performing certain tasks. One example concerns a friend of his who can only use one hand and has very limited control over it. So typing on the keyboard is very very hard for him and takes a long time because every time he has to move his hand it shakes uncontrollably and he needs a while to get it stabilized. A pretty smart solution was a different way to input letters. Instead of typing each single letter as usual a letter can be created by typing 2 letters that then get combined.

It sounds counterintuitive at first but is rather smart. There is only a block of 6 adjacent characters that is used. So he can keep his hand in a stable position and just use his fingers to type the different combinations which in turn is pretty quick. So by prioritizing individuality and adding (seemingly) nonsense. The situation has improved.

There were a few more examples illustrating his mind set so if this sounds interesting, have a look.

(Lunch-Time Session) A Blueprint to Working Happily in a Creative Team - awork [Web Twitter]

Unfortunately I did not get all of this talk as it was not clear when exactly it was supposed to start, so I was a bit late.

What I took from it, is that currently the work market is strongly in favor of knowledge workers, so people like us.

Creative people are a limited resource in the market and companies are searching and hiring more and more. On the other hand, about ⅔ of knowledge workers consider quitting their jobs in order to find more happiness.

All numbers here rely on a survey of 1000+ people from the German speaking countries conducted by awork.

So the question at hand is “What makes people happy?”.  Also according to afore mentioned survey the things mentioned the most are:

• reconciliation of private and professional live
• attractive salary
• trust within the team
• clear structures and goals
• freedom to make decisions and take responsibility
  

This means that companies need to take these points into consideration in order to be considered a good place to work and keep talented people. On the other hand, we knowledge workers are in a position of power to push towards a shift in how we want to work in the future and should not ignore this opportunity.

Returning to Your Maker Roots - Aarron Walter [Talk Profile Web Twitter Insta]

Without the intention to sound mean or condescending, this was a talk about coping with midlife crisis.

The more one’s career progresses, the more time you spend doing things other than what brought you into the field in the first place. You end up being more in meetings and organizing things instead of actually “making” things. Which is not necessarily a bad thing but sometimes it can be good to get back to what you initially had a passion for.

During the pandemic Aarron had a few realizations. One was exactly the points mentioned above. He was highly invested in his job and at a point noticed that a lot of his time was spent on overhead.

At one point he decided to step away from his job to “reduce bullshit” and focus on more substantial things. It was then when he realized that he had pretty much nothing outside his job, no hobbies, no interests and this turned out to not be a great place to be in.

What did help him was to remember the things that motivated him in the first place and reignite his ambitions to learn things, to make things.

Also due to the restrictions being in place during the pandemic he learned to cherish fewer but deeper relationships, e.g. with his family, over shallow ones that he used to have with all kinds of people. So again focusing on the basis the essentials did help him come to terms with himself.

After a while he got to talk with a friend about all these things and in the end they started hosting their own podcast “re:considering”. Together with a third friend they interview all kinds of people and talk about changes in life and how to cope with them.

If Not Now, When? Turning Your Passion Project into a Reality - Geri Coady [Talk Profile Web Twitter Insta]

During her childhood Geri got to know two sisters from Japan who were her first contact with Japanese culture. They became friends and Geri became fascinated with Japan. Unfortunately after a year the girls had to move back to Japan but Geri’s fascination remained and even grew.

It took her 20 years to finally be able to travel to Japan and even though it was a great experience once the trip was over she felt a deep void as she had now achieved what she was working on for so long.

It was then when she stumbled across an internet challenge: “What could you do with 100 days of making”

The idea was to make something every day for 100 consecutive days. For Geri this ignited a new spark and so she started to make Japanese themed illustrations, one each day for 100 days, which she published online calling it “100 days of Japan”.

The feedback she got was very positive and many were asking if she would release these illustrations as print so they could buy them. After contemplating this for a while Geri decided to take this opportunity and open a side business.

Along her way she had a lot to learn in order to make her business successful or even survive and her main learnings are what she shared with us during this talk.

The first issue she identified was that it is important to keep your passion alive. Once your hobby becomes a business there is the danger of losing the joy of what you are doing. So you need to be able to take a step back and refocus on why you are doing this in the first place.

From the financial side she did lay some ground rules for herself. She would define a strict budget of what she would spend on materials, storage and so on while playing it safe so she would not risk losing more money than she could afford.

As a web designer she was able to use her own skills in creating her website but had to learn quite a few new skills, some related to business, some more to logistics. Being a business owner you need to expand your skill set so you cope with day to day tasks.

When the time came where she was able to finally open her business she decided to go for a double release day: Taking her website live and having her own stand at a Japanese themed convention nearby. It did sound like a great idea but became one of the most crushing experiences in her life.

First of all she had no experience of what a good location for a stand was so ended up in a bad spot where not many potential customers showed up, also she was not really prepared what such a stand should look like or simply how everything was supposed to work. But the biggest issue was that this was simply the wrong audience. Almost everyone was looking for mangas or animes and respectively branded goodies of these. Everything Geri had to offer was based on Japan and Japanese culture in general and so had no affiliation with what the customers were looking for.

So sales were way way lower than she ever anticipated and of course the feedback was devastating for her. After this she turned to a friend running their own business for advice on how to deal with this. After a while she realized that it is okay if not everyone out there is totally sold on your idea from the start. It is completely normal that it takes a while until you know your audience and also until your audience gets to know you.You have to believe in yourself and your product and eventually others will as well.

This did help her keep on going and finally Geri Draws Japan took off becoming a successful side business.

During the course of this she did learn a few other valuable lessons. Competitors are not necessarily enemies even though they are selling to the same audience they can be some of your biggest fans. Don’t be afraid to reach out to people you admire as that can result in great collaborations.

Don’t be afraid to go out of your comfort zone, explore new ideas and keep learning. If you want to start (either the business itself or something new related to it) then don’t overthink it. Just do it but start small and once you grow so much that you can’t handle it alone do not be afraid to outsource or delegate tasks.
But most importantly make yourself aware that you are running a real business.

Being someone who does not really fancy the idea of becoming a business owner I can’t really relate to the topic but I felt that Geri has had a lot of experience there and think that should you consider starting your own business or maybe are already in the process this talk should be on your watchlist.

More Than Answers – Designing for Questions and Provocations - Jude Pullen [Talk Profile Web Twitter Insta]

Being a creative designer who did work for various companies Jude has a lot of experience building creative solutions to improve people’s lives. Some of which he shared with us during this talk.

I will try to summarize the basic concepts but you should really watch the video as I don’t think I can capture the whole spectrum properly.

His first story was indeed very touching as it was about Kyle, a young man who wanted to be a hairdresser but since he was born with a deformed hand this dream was just not meant to happen.

Jude started to work with him to understand what the limitations were and what Kyle would have to be able to do in order to work in his dream job. It took a while and several iterations but finally Jude presented Kyle with a kind of prosthetic that basically had two mounted combs which could be aligned differently to either let the hair flow through them or to lock it in. That way it was possible for Kyle to hold up the hair and cut it properly.

It was very moving when Jude asked Kyle to be his first customer to get a haircut.

Another project was a radio globe. A small plastic globe mounted on a speaker and with a small sight that could be moved up and down over the globe. When you turned the globe and put a country into the sight the speaker started to play a radio program from that country. The whole kit was 3D-printable and so everyone around the world could build one.

The last project was the Good Air Canary. Based on the method of the first miners to carry a canary bird with them to see if the air is still breathable Jude created a sensor device linked to mechanical canary that gave feedback once the CO2-level rose too high.

As written above, best watch the video as that will explain things so much better than I can.

Fazit

So this was the end of the first post(?)-pandemic  beyond tellerrand conference and I have to say it still feels like it did before. Great spirit, awesome speakers and Marc as usual makes everyone feel welcome. He even includes his family giving the whole event a personal touch.

It was great to be back and I can only recommend this conference to everyone.