Ich bin ein Frontend & UI Entwickler aus Bremen. Hier schreibe ich Artikel über Webentwicklung, Design, Software, Workflows und was mich sonst beschäftigt.

Du hast Anmerkungen und Feedback zu meinen Artikeln? Dann schreib mir! Ansonsten folgt mir auf Twitter und abonniert mich auf YouTube.


bradfrost.com / Direktlink

“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. “Just” is a dangerous word.

What’s the Deal with Margin Collapse?

jonathan-harrell.com / Direktlink

The concept of margin collapse is foundational to an understanding of the box model in CSS, but it is actually quite complex and potentially confusing. The spec describing how margin collapse works is thorough but difficult to understand. This article is an attempt to give some visual examples to the concepts from the specs.

The basic idea behind margin collapse is that if two margins are adjoining, they will collapse into one margin, which will have the greater of the two margin values (it will be the more negative of the margins if both margins are negative).

Designing Button States

cloudfour.com / Direktlink

Buttons are a staple of any design system. The best ones are simple, versatile, maybe even a little fun. But there’s a lot of hidden complexity in these jolly, candylike controls and toggles… complexity that’s easy to overlook when we focus on the same old default and hover states in our designs.
In truth, mouse effects are probably the least important state to design for. By accounting for more functional states early, you can lower the need for costly redesigns as your pattern library matures.

via @brad_frost

Ack for CSS Developers

csswizardry.com / Direktlink

I use Ack as part of auditing a project, or when trying to find my way around a larger codebase. It’s also pretty useful for tracking down bugs and oddities. In this short post, we’ll look at a small number of ways CSS developers can make use of Ack in their workflow.

Ich bin zwar eher ein Fan von Ag statt Ack, aber alles was Harry hier anmerkt sollte auch in Ag funktionieren.

The best editor is neither Emacs nor Vim, it's Emacs and Vim!

Modern CSS Explained For Dinosaurs

medium.com / Direktlink

CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer.

Peter Jang's sehr umfangreicher Artikel ist ein Geschichte, Tutorial und Überblick. Es fängt sehr einfach an und nimmt Fahrt auf. Unbedingt lesenswert - für jeden.

In order to deal with the inherent complexity of CSS, all sorts of different best practices have been established. The problem is that there isn’t any strong consensus on which best practices are in fact the best, and many of them seem to completely contradict each other. If you’re trying to learn CSS for the first time, this can be disorienting to say the least.
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in 2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!

Floats, Flexbox, CSS Grid, Preprozessoren, Variablen, OOCSS, BEM, SMACSS, Atomic CSS, CSSJS, u.v.m.
Ausserdem gibt es Dinosaurier Comics. Über CSS.

Embrace AMP or AMP Wins

dennisforbes.ca / Direktlink

Das Thema AMP hat schon fuer viele hitzige Diskussionen gesorgt. Es gibt einen grossen Teil Entwickler die sich nichts mehr wuenschen als AMP sterben zu sehen. Und sie haben gute Argumente - Amp ist komplett unter der Kontrolle von Google, proprietär und im Endeffekt erlaubt man Google seinen Content in Googles Cache zu laden. Dazu wird es aktiv auf jeder mobilen Suchergebnisseite beworben.

Aber ist dieser Hass auf Amp wirklich das Problem? Oder ist es vielleicht die Industrie die dafuer gesorgt hat, dass AMP (oder auch die vergatterten Varianten wie Apple und Facebook News) so schnell vom User angenommen wird

Dennis Forbes hat sich auch mit der Problematik beschäftigt und ein paar sehr gute Absätze zu diesem Thema geschrieben.

Because in the end it is a better user experience. Being on a mobile device and seeing the icon ⚡ is an immediate assurance that not only will the page load almost instantly, it won’t have delay-load modal overlays (Subscribe! Like us on Facebook!), it won’t throw you into redirect hell, it won’t have device-choking scripts doing spurious things.

Ich selber klicke lieber auf einen AMP Artikel, als die Standard (mobile) Seite - genau aus dem Grund.

We could do better, but right now everyone has exactly the wrong approach in confronting AMP.
“We don’t need AMP: We have the powerful open web, and publishers can make their pages as quick loading and user-friendly as AMP…”
This is a losing, boorish argument that recurs in every anti-AMP piece. It is akin to saying that the EPA isn’t necessary because industry just needs to be clean instead. But they won’t. AMP isn’t an assurance for the publisher, it’s an assurance to the user.
AMP isn’t a weak, feel-good certification. To publish via AMP you allow caching because that cache host validates and forcefully guarantees to users that your content lives within the confines of AMP. You can’t bait and switch. You can’t agree to the standard and then do just this one small thing. That is the power of AMP. Simply saying “can’t we all just do it voluntarily” misses the point that there are many bad actors who want to ruin the web for all of us.

Wir - die Leute hinter den Webseiten - sollten nicht diejenigen sein die sich ueber AMP beschweren, wir haben dafuer gesorgt dass es notwendig war. Wir können aber Amp nutzen und zu unseren eigenen Vorteil nutzen. Ganz ohne Google. Eine Idee von Forbes ist es - eine eigene Google-unabhaengige HTML Version zu schaffen. HTML Lite.

We need to embrace the theory of AMP while rejecting the centralized control and monitor that it entails.

Bei dieser Idee bin ich 100% dabei.