Beyond Tellerrand 2019 Düsseldorf

The last two days I spent at the excellent Beyond Tellerrand conference in Düsseldorf. It was my second time after being in Berlin in 2017. As always I took notes on my phone, so autosuggest may have introduced some errors. Some videos are already up if you want to see the complete talks.

If you can, go to one of those conferences! The speakers are exceptional and it has a very familiar feeling being there. Thanks to Marc Thiele for running this each year!

I also want to thank Ubilabs for providing each employee with a conference budget every year. If you want that, too: we are currently looking for JavaScript developers for our brand new Hamburg office!

But now to the talks, these are my notes:

All constraints are beautiful — Charlie Owen

Constraint: something that controls what you do within certain limits

Contraints are everywhere. Physics is a constraint. Social norms are constraints, too. Putting constraints on oneself creates creativity.

When designing for the web we don't respect the constraints of the situation. We suspect everybody filling out our form has a short “normal” name. What about long Latin American names? We suspect everybody has the time to focus just on our product and does nothing else besides.

These are the constraints while developing for the web we need to respect:

  • infinite technology
  • infinite humanity

15% of people have some sort of disability. It's a constraint we need to respect. Being a Full Stack Developer but not doing A11Y because it's too hard? Come on!

If you ignore the constraints, it will have to be payed off by someone. Most likely not us, but others. We, the designers and the developers, are responsible. Question what you use and what implications it has.

Humanising your Documentation — Carolyn Stransky

Why do we write documentation? It's often an afterthought that needs to be done. It should be a first thought instead.

Use case driven documentation: describe from a users point of view. Don't describe the interface element by element. Describe how to accomplish certain user goals.

Respect these tips:

  • Bad documentation is bad. No docs would be better and not wasting time of people.
  • Writing is only a part of documentation. Think before writing. catches bad writing and suggests alternatives. Avoid master/slave and better use primary/replica. It’s not only less racist but also describes it better.
  • Don't say it's simple. Prove it and be absolute (e.g. takes just 5 lines of code).
  • Avoid bloated language. No one has ever complained that something is too easy to read. Use Hemingway App to simplify the writing.
  • Code snippets should never be Screenshots. Users can copy and paste written out code to try it out easily.

The Power of Metaphor — Mike Hill

Stories shape us and we shape the world. Stories have a great impact.

The monomyth powers a lot of movies: Star Wars, Jurassic Park, Matrix and more. It's a transformation from the old self into the unknown world and coming out of it as the new self. We do that often in our lives. We grow each time we do that.

Don't suppress the animal within you. Integrate it into your ego. You can't be responsible for life if you haven't the total range of human emotions. Jurassic Park, for example, is actually about life, the couple becoming full humans to take the responsibility of life. Dinosaurs are just mixed in to the story.

What’s important in a story is the quality, not the quantity of something. Jurassic World was a bad sequence because it didn’t get what made Jurassic Park such a good story (the growth of the characters). It focused on the quantity of the dinosaurs instead.

Making Art with Familiar Objects — Red Hong Yi

Stick through when working on a project. Showing up frequently motivates. You'll improve by producing frequent work. Creativity is like a muscle and needs to be trained.

Never Snap to Guides — David Carson

He shows off a lot of works. Some were not released and he giggles when telling the story for those.

Design is bringing things to see that others don't see.

Don't let the computer decide on columns and widths. Has to fit the content and can vary. He doesn't like guidelines. Why need a designer, when you have so many guidelines?

If something is too obvious, it may be too easy. There may be a better solution.

Try to challenge the client: BOSE never had other than white male models before (ten years ago or so). Show clients what you create so they can pick from it. If you don't show, they won't know. And you'll never know what silly ideas emerge from that.

Hard Work, Relentless Dreams and Wifi — Rob Draper

Always worked for agencies and ended up jobless. Wanted to get known, but how to sell without selling?

Started to put photos of drawn coffee cups on Instagram. Got positive feedback and pushed it forward. Some newspaper picked it up and then it spread quickly. It became a real thing.

From there it went downwards fast. Marriage over, dog died. Two things are important now: work and son.

Clients just want quality in time and budget. No matter the office or personal stuff. The better the cup drawings became, the more clients showed up. He kept drawing and drawing. Did drawings for the Golden Globes and fulfilled his big childhood dream of doing work for Nike.

I don't care what Airbnb is doing — Stephen Hay

We rely on conventions because they will often give us an acceptable solution with minimal effort.

The Hamburger menu is used a lot. But how did it start? How do we know what it is doing? Facebook started to use it. People took it up and used it. As choosers of existing solutions, we are not the ones thinking and creating those solutions to choose from.

Nothing exciting happens in the comfort zone.

Stop focusing on the solution, and start focusing on the problem.

The Scoville Scale of Web Font Loading Opinions — Zach Leatherman

It's web font, not webfont!

With performance budgets less is more. But sometimes we trade bytes for features. Web fonts are how to dress what we write. Do use web fonts!

Use only woff and woff2. Local font references are discouraged. Assuming they are the ones we want just by sharing the same name isn't secure. Fonts are software, too. They need maintenence and updates. Use font-display: swap; and a fallback font that matches the web font dimensions closely to avoid jumps.

Edge on Chromium Ask me Anything — Christian Heilmann

Being standards compliant isn't enough for a browser. Most people build for non standard features in Chromium. Microsoft is pragmatic in supporting what basically runs the web nowadays. Chromium is an open source project with a big company behind — why not go in there and be a second big player in the project?

The change is a chance to unbundle the browser from the system. It doesn't have to come with an upgrade to Windows 10 anymore. Microsoft doesn't have to pay catch up with new Chrome things anymore.

Old Edge browsers will be replaced when the new one comes out! IE is more difficult. A new solution is to define sites that need the old rendering. When you open such a site it'll use Trident in that tab in the same Edge on Chromium window.

It's sad to see a rendering engine go away, but it's the developers fault by making Chromium the standard themselves. Microsoft wants to bring Chromium back from de facto standards to standards, being the force of good. The risk of a fork like blink and Webkit is there, but it's a total different story. Apple and Google were separating because Webkit is integrated iOS and there were differences in the priorities. Microsoft is actually decoupling the browser from the system with that move.

Napworking — Doro Ottermann

If you can't change a thing, rename it.

The brain must be bored to be creative. She collects ideas and other things. The sand out of her daughters shoes gets collected, for example. All the ideas are in a Zettelkasten. Her biggest fear is running out of ideas. When she has no idea, she'll pick a random card and brainstorm from there. Be open for coincidences. Sometimes those ideas transform to real projects.

Flexbox Holy Albatross — Heydon Pickering

JS is JengaScript: if it fails, everything falls apart. He creates container queries in CSS. Works for the width using min and max width or with Flexbox.

Check out his funny video series “Making Future Interfaces”.

Take Your Web Back — Tantek Çelik

Stop scrolling Facebook. It's the only social media with a dedicated criticism Wikipedia page. And it’s a long one.

Websites can communicate with each other now: use Webmentions. Get your domain and own the content. Be in control and use it as a playground for tinkering with new technology.