Don’t Live with Broken Windows

I think this one is very similar to the boy scout rule and one of the things that was teached me first by my mentor when i started my career as a developer.

It happened to me all to often that i saw good and well architected projects being concepted and going live but then somehow the code base after a time gets worse and worse. And in most cases noone polluted the code base on purpose.

There are many factors that can contribute to software rot, but most are maybe cultural, organizational or psychological reasons.

What can we do? How can we avoid thats software gets rotten, although we maybe don’t get the time to maintain them.

I like the broken window example, which i stumbled upon in my first lecture of the pragmatic programmer years ago.

In inner cities, some buildings are beautiful and clean, while others are rotting hulks. Why? Researchers in the field of crime and urban decay discovered a fascinating trigger mechanism, one that very quickly turns a clean, intact, inhabited building into a smashed and abandoned derelict .

A broken window.

One broken window, left unrepaired for any substantial length of time, instills in the inhabitants of the building a sense of abandonment—a sense that the powers that be don’t care about the building. So another window gets broken. People start littering. Graffiti appears. Serious structural damage begins. In a relatively short space of time, the building becomes damaged beyond the owner’s desire to fix it, and the sense of abandonment becomes reality.

The “Broken Window Theory” has inspired police departments in New York and other major cities to crack down on the small stuff in order to keep out the big stuff. It works: keeping on top of broken windows, graffiti, and other small infractions has reduced the serious crime level.

Don’t live with broken windows!

Don’t leave “broken windows” (bad designs, wrong decisions, or poor code) unrepaired. Fix each one as soon as it is discovered. If there is insufficient time to fix it properly, then board it up. Perhaps you can comment out the offending code, or display a “Not Implemented” message, or substitute dummy data instead. Take some action to prevent further damage and to show that you’re on top of the situation.

We’ve seen clean, functional systems deteriorate pretty quickly once windows start breaking. There are other factors that can contribute to software rot, and we’ll touch on some of them elsewhere, but neglect accelerates the rot faster than any other factor.

You may be thinking that no one has the time to go around cleaning up all the broken glass of a project. If you continue to think like that, then you’d better plan on getting a dumpster, or moving to another neighborhood. Don’t let entropy win.

#doorslam

Any modal message—full-screen or alert—that interrupts user flow to ask them to download your app suffers from #doorslam an ux antipattern.

See some examples here: http://idontwantyourfuckingapp.tumblr.com/

Promotions should never steel the show. If you present your users a full-scale layover as the first thing they see if they visit your site, you can be sure that you will annoy them. Most likely you will especially annoy your most loyal and familiar customers.

Users will come to your site to do some task and they don’t like anything that gets in their way. It is even more suprising that companies add such a ux anti pattern although they have a mobile optimized site.

You should never loose the opportunity to engage with your users.

Customers will tolerate a dismissible banner if it doesn’t take up to much space on the screen.

So please stop ruin’ the mobile web! Thanks!

CSS display:flex

Positionieren mit dem Box-Modell war immer eine haarige Angelegenheit. Wir haben mit position:absolute, position: relative und float im Code randaliert um unsere Layouts in den Griff zu bekommen.

Die CSS3 flexbox ist ein Layout Modus der es um einziges vereinfacht Elemente auf der Webseite zu positionieren vor allem wenn es darum geht die Inhalte auf verschiedenen Viewportgrößen anzupassen. Es bietet gegenüber dem Block-Modell eine Menge Vorzüge da es weder mit floats arbeitet noch zusammenfallende Margins anfallen.

Kind-Elemente in einer flexbox können flexible Maße haben und sich an den verfügbaren Platz anpassen. Zumindest kann die Darstellungsrichtung angegeben werden. Das Positionieren der Kind-Element ist sehr einfach und komplexe Layout können mit wesentlich einfacherem und sauberem Code erstellt werden. Die Unabhängigkeit betrifft beabsichtigterweise nur die visuelle Darstellung, sprich Sprachrichtung und Navigationsrichtung erfolgt weiterhin über die Reihenfolge der Elemente im Quellcode.

Flexbox Konzept

Das grundlegende Konzept von flex layout ist die Fähigkeit der Änderung der Elemente in Breite und Höhe um den verfügbaren Platz bestmöglich auszufüllen. Die Inhalte eines flex-Container werden auf den verfügbaren Platz ausgeweitet oder gestaucht um Überlauf zu verhindern.

Im Gegensatz zum Block Layout das vertikal ausgelegt ist oder dem inline layout das horizontal ausgelegt ist, ist der Ansatz des flexbox Layout Algorithmus richtungsunabhängig. Während das Block-Layout gut für Seiten funktioniert, leidet es doch deutlich bei Orientation-Change, Resize, Stretch oder Shrink.

Flexbox ist eignet sich besonders bei Komponenten einer Applikation während das CSS Grid-Layout mehr für größere und skalierbare Layouts angedacht ist.

Flexbox Vokabular

Flex container

Das Elternelement in dem sich die Flex Items befinden. Ein Flex-Container wird definiert mit der Angabe:

display: flex

Flex Item

Jedes Kind-Element eines Flex-Container wird automatisch zu einem flex-Item.

Reihenfolge

Die order Eigenschaft definiert eine (Darstellung-)Ordnung bei den Elementen. So ist z.B. möglich das ein Element mit

order: 1

in der Darstellungsreihenfolge unabhängig von der Reihenfolge im Markup darzustellen.

Z.b. wäre es damit auch möglich z.B. den aktuellen ausgewählten Tab in einem Menü nach vorne zu schieben.

Das müsste man nur folgendes schreiben. (Vorausgenommen das aktive Tab bekommt die Klasse .is-active)

.tabs > .is-active {
  order: -1; /* niedriger als der Standwert 0 */
}

Dies ist nur ein kleiner Auszug aus den Möglichkeiten die sich mit Flexbox ergeben. Zum weiteren Studium möchte ich sowohl das offizielle Working Draft empfehlen (http://www.w3.org/TR/css3-flexbox/) wie auch die gute Einführung von Chris Coyier (http://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Holy Grail Layout Beispiel

Dieses Beispiel zeigt wie uns flexbox dabei hilft das Layout dynamisch entsprechend der Viewportgröße anzupassen.

Es ändern sich nicht nur die Elemente in ihrer Größe sondern auch die “Sortierung” lässt sich leicht ändern. Somit es z.B. möglich den visible Content zu priorisieren. In float oder block Layout werden so in kleineren Viewport erst Elemente wie Sidebars und Co gerendert die aber initial im display:none versteckt sind. Dieses lässt sich mit Hilfe von flexbox einfach umgehen.

Am besten schaut man sich das Beispiel direkt auf Codepen an.

See the Pen vEWRXb by Christoph Reinartz (@creinartz) on CodePen.0