Command Line Oneliners →

Die Kommandozeile ist für mich noch eines der Mysterien dessen Möglichkeiten ich bei weitem nicht ausschöpfe. Da kommt diese Sammlung an teils praktischen Beispielen gerade recht.

elementaryOS – Das bessere Ubuntu

Bei Linux bin ich experimentierfreudig. Auf diesem Laptop und meinen Netbook liefen schon verschiedenste Linux Distributionen. Immer wieder aber gab es Kleinigkeiten die mich gestört haben – zuletzt bei Ubuntu bspw. der Unity Launcher. Dann bin ich eher zufällig auf elementaryOS gestoßen und nach kurzen Probieren auf dem Live-Stick war der Klick auf “Installieren” kein sehr schwerer.

Okay, auf dem ersten Blick wird eOS wie ein Apple OSX Klon – und ja das Apple OS stand offensichtlich für viele Features Pate. So gibt es eine Systemleiste oben und ein Dock am unteren Bildschirmrand. Viele Systemprogramme wie für E-Mails oder Musik erinnern auch an eine Basisversion des Apple OS. Aber beim genaueren Hinsehen erkennt man auch vieles was eOS sogar deutlich besser macht.

Programme starten fast beinahe sofort nach dem Klick. So eine Reaktionszeit habe ich bislang bei keinem anderen OS erlebt, durchaus etwas woran man sich gewöhnen kann. ElementaryOS ist dazu stark anpassbar und der MacLook kann sich schnell auf das Wesentliche reduzieren (Siehe Links am Ende des Artikels). Hier mein aktueller Desktop:

Elementary OS

Die aktuelle eOS Version “Luna” basiert auf Ubuntu 12.04 LTS, bringt also auch alle Vorteile von Ubuntu mit, das beinhaltet also auch dass (fast) alles was auf Ubuntu vorhanden ist, auch auf eOS läuft. Wer will kann also auch das Ubuntu Software Center nutzen – wobei hier bereits an einer eigenen GUI Lösung gearbeitet wird – da das USC nicht wirklich schnell und intuitiv ist.

Die Installation ist sehr schnell

Falls ihr also ein älteres Stück Hardware zuhause stehen habt, empfehle ich durchaus mal einen Blick auf Elementary zu werfen. Besonders Mac User (wie ich eigentlich einer bin) werden sich sehr schnell mit dem System anfreunden können.

Falls aber ein direkter OSX Klon auf Linuxbasis benötigt, sollte sich ggf. PearOS angeschaut werden.

Links

SCUT – Sass CSS Utilities

Dass ich SASS inzwischen als Standard erachte, dürfte bekannt sein. Zu sehr habe ich inzwischen die Vorteile von Präprozessoren zu schätzen gelernt – Variablen, Mixins, Funktionen, etc.. Dazu gibt es noch einige Frontend-Frameworks wie Foundation und Bibliotheken wie Compass und Bourbon. Ein weiteres Tool kommt jetzt mit Scut daher.

Scut steht für Sass-CSS-Utilities. Hierbei handelt es sich nicht um ein Frontend-Framework mit vordefinierten Styles, sondern um nützliche Sass Mixins und / oder Platzhaltern. Die Implementation orientiert sich an aktuellen Best-Practices wie z.B. REM Werte.

Der Sinn und Zweck einer solchen Bibliothek ist meiner Meinung nach einfach Ansichtssache. Viele momentan eingebundene Funktion sind schnell selbst in SASS erstellt, manche recht trivial, manche auch nicht notwendig. Interessant wird es wenn man diese als in ihrer Funktion als Sass Platzhalter nutzt d.h. diese im CSS an einer Stelle gebündelt werden. und so einen schmaleren Output ergeben. Auch Faulheit wird hier belohnt – wie auch bei Compass ist die Kurzschreibweise von Mixins und Plathaltern angenehmer und kürzer als der normale Weg wie bspw. eine Darstellung als Dreieck.

Einfach selbst anschauen, nutzen und ggf. forken und erweitern – das wird vom Ersteller David Clark ausdrücklich erwünscht.

Links

Objects in Space →

Objects in Space - in one Image

Andrew Colclough hat seinen Herangehensweise an SASS Modulen (zusammen mit SMACSS und BEM) aufgeschrieben. Der Artikel ist schon knapp einen Monat alt, aber inzwischen habe ich seine Tipps auf meinen Workflow adaptiert und bin ziemlich angetan.

Solved By Flexbox — Cleaner, hack-free CSS →

Solved By Flexbox — Cleaner, hack-free CSS:

This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with Internet Explorer 11 and Safari 6.1 now in beta, Flexbox will soon be supported in every modern browser.

Flexbox, Flexbox, Flexbox, … nicht nur ich finde dass dieses Element die Zukunft ist, auch Philip Walton ist wohl der Meinung und hat diese kleine Seite auf die Beine gestellt. Er zeigt welche Techniken und Hacks “demnächst” einfach erreicht werden können.

Ich kann auf fliegende Autos verzichten, aber nicht auf die Flexbox… Also los Zukunft – Streng dich mal an!

Flexbox (Teil 2)

Dies ist die Fortsetzung zu meinen Flexbox Blogartikel vom Dezember 2012. Und die gute Nachricht ist: Es hat sich nichts geändert und es zeichnet sich ab dass Flexbox bleibt wie es ist ¹. Grund genug einen Folgeartikel zu schreiben. Im letzten Artikel habe ich kurz die Grundlagen, order und das Seitenverhältnis angerissen. Jetzt kommen dann die spannenden Sachen.

Flex-Direction, Flex-Wrap und Flex-Flow

Flex-Direction
Die Ausrichtung der Elemente in einer Flexbox kann man waagerecht und senkrecht positionieren. Zusätzlich kann man auch die Reihenfolge anpassen.

flex-direction: row | row-reverse | column | column-reverse

Hier ein Demo – mit den einzelnen Attributen zum ausprobieren.

Flex-Wrap
Mithilfe von flex-wrap kann ein Umbruch erzwungen und die Reihenfolge umgedreht werden. Es ergeben sich die Möglichkeiten:
- nowrap – Es gibt keinen Umbruch. Dies ist der Standardwert
- wrap – Es erfolgt ein automatischer Umbruch, die Reihenfolge wird aber beibehalten
- wrap-reverse – Ähnlich wie wrap, allerdings in umgekehrter Reihenfolge

flex-wrap: nowrap | wrap | wrap-reverse

Hier ein Demo zum Ausprobieren.

Flex-Flow
Dies ist die Kurzschreibweise für flex-direction und flex-flow und erlaubt alle an der Stelle möglichen Werte. Standardmäßig ist dieses Element flex-flow: row nowrap.

Auch wenn diese Elemente im Wesentlichen nur rudimentär zwischen “normal” und “umgekehrt” unterschieden werden können, sind diese insbesondere verschachtelt und im Zusammenhang mit Media-Queries alleine schon sehr mächtig.

Justify-Content, Align-Items und Align-Content

Sollte es vorkommen, dass eine Flexbox nicht die ganze Seite ausfüllt – sei es durch feste Werte oder ausgereizte Maximalangaben – können die Elemente mit justify-content ausgerichtet werden. Hierbei gibt es 5 Werte, wobei vorallem die ersten drei dem herkömmlichen text-align ähnlich sind

  • flex-start – Die Elemente werden zur Seite des ersten Elements ausgerichtet. Also auch abhängig von der flex-direction (Standardwert)
  • flex-end – Analog dazu werden diese Elemente am Ende ausgerichtet
  • center – selbsterklärend
  • space-between – Es wird gleichmäßig Abstand zwischen den Elementen vergeben, jedoch nicht am Rand.
  • space-around – Ähnlich dem vorherigen, allerdings mit Abstand zum Rand.

Hier ein Demo mit allen Werten zum Ausprobieren..

align-items
Da Flexbox nicht nur horizontal, sondern auch vertikal sehr präsent ist, gibt es analog zu justify-content auch noch die Möglichkeit Elemente vertikal zu orientieren. Darum gibt es auch sehr ähnliche Werte.

  • flex-start – Die Elemente werden zur Seite des ersten Elements ausgerichtet. Also auch abhängig von der flex-direction (Standardwert)
  • flex-end – Analog dazu werden diese Elemente am Ende ausgerichtet
  • center – selbsterklärend
  • space-between – Es wird gleichmäßig Abstand zwischen den Elementen vergeben, jedoch nicht am Rand.
  • space-around – Ähnlich dem vorherigen, allerdings mit Abstand zum Rand.

Obligatorisches Demo.

align-content
Dieses Element richtet den kompletten Block aus. Es kann als vertikale Version von justify-content gesehen werden. Auch hier ist die Benennung und Funktion ähnlich den vorherigen Elementen. align-content kann mit folgenden Werten aufgerufen werden

  • flex-start – Nach oben ausgerichtete Elemente
  • flex-end – nach unten ausgerichtet
  • center – mittig ausgerichtet
  • space-between – Gleichmäßiger Abstand zwischen Elementen
  • space-around – Gleichmäßiger Zeilenabstand, auch oben und am unteren Rand
  • stretch – Elemente werden auf die Höhe gezogen.

Und die Demo zum rumspielen.

Das war immer noch nicht alles, es gibt noch flex-shrink und flex-grow und vieles mehr. Und noch diverse Techniken, wie man mit Responsiven Layouts umgehen kann.
Wie immer: Vorschläge, Kritik, Feedback gerne in die Kommentare, Mail oder Twitter!

_______________-
¹ Ich hoffe ich lese diesen Artikel nicht in einigen Jahren und lache verzweifelt

Emmet LiveStyle →

Emmet ist ein Browserplugin, dass bi-direktionale CSS Bearbeitung ermöglicht. Vom Prinzip her sehr praktisch – mir fehlt hier allerdings noch der SCSS Support.

Sizing Web components →

simurai:

So when it comes to changing the size of a component, for example making a Slider bigger for touch input, it might get tedious fiddling with all the widths/heights, border-radi.. etc. So how can we make it easier? Well, by sneaking a Trojan horse into your components and use it to control all the size related CSS properties.

Was im Artikel als “Trojanisches Pferd” bezeichnet wird, mache ich seit einiger Zeit so. Die Größe anhand von Schriftgrößen bestimmen. Im Wesentlichen eine Modulare Version der Flexible Foundations

Native equivalents of jQuery functions →

Wer Webseiten macht, wird bei den Skriptsprachen höchstwahrscheinlich JavaScript nutzen und noch wahrscheinlicher ist, dass der Großteil mit jQuery gemacht wird. Und so kommt man irgendwann zu dem Effekt, dass jQuery gelernt wird anstatt sich mit nativen JavaScript auseinanderzusetzen¹.

Lee Brimelow (von Adobe) hat auf seinen Blog diverse jQuery Funktionen gesammelt und mit dem entsprechenden Javascript Varianten ergänzt. Evtl. einfach demnächst mal diese, anstatt jQuery nutzen – allein schon wegen der Performance wegen..

¹ Ich selber gehöre übrigens auch zu dieser Sorte Mensch, auch wenn ich gerade dabei bin dieses zu ändern.

SASS Directives: Schleifen und bedingte Anweisungen

Weil ich es teilweise selber immer wieder nachsuchen muss – nachfolgend die vier Kontrolldirektiven von SASS. Die Grundzüge sollten den meisten bekannt sein, hier geht es eher um die allgemeine Syntax und Eigenheiten in der Syntax.

@if

Eine einfache if/else Anweisung. Eigentlich selbsterklärend, trotzdem; Wenn $is-rem true ist wird der erste Block ausgeführt, wenn nicht dann Block Zwei.

@if $is-rem {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}@else{
    font-size: $sizeValue + em;
}

@for

Die For-Schleife in SASS. Etwas anders als die Bekannte for(i = 0, i<3, i++) Schreibweise. In diesem Fall wird die Schleife 3 mal ausgeführt und beginnt bei 1. Die $i Variable wird jedesmal um eine Stelle erhöht.

@for $i from 1 through 3 {
    .span-#{$i} { width: 2em * $i; }
}

Output:

.span-1{ width: 2em; }
.span-2{ width: 4em; }
.span-3{ width: 6em; }  

@each

Das @each-Direktiv arbeitet eine definierte Liste ab, in diesem Fall diverse GUI Elemente. Hierbei steht $ui für die Variable, die auch als dateiname verwendet wird.

@each $ui in edit, save, check, logout {
    .#{$ui}-icon {
        background-image: url('/images/icon-#{$ui}.png');
    }
}

Output:

.edit-icon{ background-image: url('/images/icon-edit.png'); }
.edit-save{ background-image: url('/images/icon-save.png'); }
.edit-check{ background-image: url('/images/icon-check.png'); }
.edit-logout{ background-image: url('/images/icon-logout.png'); }

@while

Mit While wird ein Element solange wiederholt, bis eine Bedingung wahr ist. Hier wird ein Grid mit 12 Spalten erstellt.

$grid: 12;
@while $grid > 0 {
    .col-#{$grid} { width: 2em * $grid; }
    $grid: $grid - 1;
}

Output:

.col-12{ width: 24em; }
.col-11{ width: 22em; }
.col-10{ width: 20em; }
....
.col-1{ width: 2em; }

Auch wenn dieser Beitrag etwas knapp war, ich hoffe der eine oder andere kann hier etwas mitnehmen. Unklarheiten, Anmerkungen und Feedback gerne in die Kommentare.

Pure →

Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

Pure ist eine CSS Sammlung von Yahoo und tritt damit in eine Reihe mit Twitter Bootstrap und Zurb Foundation. Der Hauptaugenmerk liegt in hier auf der kleinen Detailgröße. Kann man im Auge behalten, für mich persönlich aber noch nichts was ich in meiner täglichen Routine nutzen könnte.

Pure.css auf Github

Beyond Tellerrand 2013 – Notizen

Vom 27-28.5 hat in Düsseldorf die Beyond Tellerrand Konferenz stattgefunden. Ein Treffen für Frontend Entwickler, UX’ler, Designer und sonst allen die was mit dem Thema Web zu tun haben. Ich behaupte, dass die Tellerrand einer der Konferenzen ist, die man mindestens einmal besucht haben sollte. Es ist fast unglaublich, was eine Person fast ganz alleine auf die Beine stellen kann. Darum jetzt schonmal – Danke Marc!

Es gab viel zu erleben – der Elefant im Raum war eindeutig das Thema Responsive Webdesign – aber auch ansonsten wurde über die Vergangenheit und die Zukunft im Allgemeinen geredet. Es wurden neue Werkzeuge der Welt präsentiert, Vorträge gesungen, Werber denunziert und das Web zurückgefordert. Dazu viel Networking, Kaffeekunst, 3D Drucker, (Gratis) Kaffee und einiges mehr… (Bier).

Nachfolgend habe ich meine handschriftlichen Notizen digitalisiert und etwas ausgebaut. Dadurch dass die Vorträge auf Englisch sind, sind es auch meine Notizen – eine Übersetzung würde Zeit kosten und Dinge noch mehr aus dem Kontext reißen als sie es schon sind. Auch werde ich diesen Beitrag dann noch mit Videos erweitern, sobald diese verfügbar sind. Bilder kommen im übrigen direkt von Twitter, ich sass einfach zu weit hinten um ein vernünftiges Bild aufzunehmen.

Update 30.5: Kurzes Preview Video des Josh Brewer Sing-A-Longs (via)

(mehr…)

IE10, Metro, and Media Queries →

Adrian Roselli:

The lesson I learned here is that if I want to properly test Internet Explorer 10, I can’t rely on a desktop installation on Windows 7 or Windows 8, I need to also test in the Metro interface and, ideally, on the appropriate hardware as well.

Ich war kurz davor zu glauben, dass mit dem Internet Explorer 10 endlich ein brauchbarer, sich an Standards haltender Browser veröffentlicht wurde. Bis ich diesen Artikel gelesen habe. Kurzes Zusammenfassung: Microsoft erkennt Media Queries wie andere Browser es auch machen, bis zu dem Moment in dem eine Seite im Metro Modern Kachel Modus des Internet Explorers aufgerufen wird. Hier tritt scheinbar eine Eigenschaft der mobilen Geräte in Kraft, in der Media Queries vom Browser ausser Kraft gesetzt wird und eine implementierte Skalierung eingesetzt wird.

Rosellis Lösung: @-ms-viewport { width: device-width; } in das CSS einfügen. Trotzdem bleibt mir schleierhaft, wieso so etwas überhaupt implementiert wird.

Achtung: Ich konnte dieses Verhalten aufgrund momentan fehlender W8 Peripherie nicht testen.

Zwei SASS Mixins: Vendorize und Font-Size

Hier schnell zwei SASS Mixins, die mir in der Vergangenheit unendlich viel Zeit erspart haben. Das eine erstellt schnell alle möglichen Browser Prefixe, dass andere setzt Fontsize wahlweise in REM und EM.

@mixin vendorize($property, $value) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

Das Prinzip ist simpel: Will man neuere CSS3 Funktionen nutzen, einfach den Include aufrufen.
Beispiel Transition: @include vendorize(transition, background .5s ease-in-out);
Ja, es gibt einen Nachteil: Nicht immer werden alle Browserprefixe benötigt – manchmal gibt es auch keine MS Varianten. Aber dass kann mir in diesem Moment noch egal sein. Man könnte dieses evtl. mit einer Variable @supportIE lösen oder oder oder…

Das zweite Mixin ist font-size:

@mixin font-size($sizeValue: 1.6){
    @if $is-rem {
        font-size: ($sizeValue * 10) + px;
        font-size: $sizeValue + rem;
    }@else{
        font-size: $sizeValue + em;
    }
}

Hier wird vorab per Variable definiert ob REM Schriftgrößen genutzt werden soll. Wenn ja, dann wird der übergebene Wert als rem inkludiert und bekommt einen px-Wert als Fallback.
Ansonsten kann man auch einfach em-Werte nutzen.

Beispiel: @include font-size(1.6) wird mit aktivierter @is-rem Variable zu:

font-size: 1.6em;
font-size: 16px;

ansonsten zu:

font-size: 1.6em;

Vielleicht kann einer von euch ja genau sowas gebrauchen, mir jedenfalls hat es eine Menge Zeit gespart.
Hast du Anmerkungen? Was sind eure Lieblings Mixins? Schreibt sie doch in die (immer noch kaputten) Kommentare.

CSS Architecture →

Philip Walton:

I believe the goals of good CSS architecture shouldn’t be that
different from the goals of all good software development. I want my
CSS to be predictable, reusable, maintainable, and scalable.

Philip hat die Kernpunkte einer guten CSS Architektur in Worte gefasst und gleich derzeitige Bad Practices mit aufgeführt. Besonders Themen wie überspezifizierte Selektoren kann ich jedem (auch den Preprozessor Nutzern) empfehlen. In mir stirbt immer etwas, wenn ich dass CSS Martinshorn sehe…

Tiny Tiny RSS

Dass mich das Ableben des Google Reader etwas getroffen hat, konnte man vielleicht an diesem Beitrag vielleicht bereits erkenne. In der Zwischenzeit habe ich viel ausprobiert und getestet und bin, wie am Titel dieses Beitrages zu erkennen, bei Tiny Tiny RSS (TT-RSS) gelandet.

Hosting und Installation

Zunächst sollte erwähnt werden, dass TT-RSS ein gehosteter Service ist. Es sollte also ein Server mit PHP 5.3 und einer MySQL Datenbank vorhanden sein. Zwar ist PHP 5.3 noch nicht überall installiert, sollte bei den meisten Anbietern nach kurzer Anfrage verfügbar sein (Bei All-Inkl.com hat dieses ca. 3 Stunden gedauert).
Eine andere Möglichkeit – für die ich mich auch entschieden habe: uberspace.de.

Uberspace bietet einen exzellenten Hosting Service mit fast unbegrenzen Möglichkeiten. Einen schnellen Server, SSH Zugang und dass zu einem sehr fairen Preis: Zahl was du willst. (+ einen Testmonat).

Dieser Service gefällt mir inzwischen so gut, dass ich in den nächsten Wochen wohl komplett umziehen werde.

Für die Installation steht im Uberspace Wiki eine Anleitung bereit. Darum werde ich hier auch nicht wirklich drauf eingehen.

Die Kurzfassung (direkt aus dem Wiki, Installation im Beispielordner /feeds:

//Neueste TT-RSS Version ziehen
curl --silent --location https://github.com/gothfox/Tiny-Tiny-RSS/archive/1.7.8.tar.gz | tar -xzf -
// In den Ordner Feeds verschieben
mv Tiny-Tiny-RSS-1.7.8 feeds
// In selbigen Ordner wechsen...
cd feeds
// ... und SQL Schema automatisch in deine Uberspace Datenbank importieren.
mysql `id -nu` < schema/ttrss_schema_mysql.sql

// Anschließend die Konfiguration kopieren und umbenennen...
cp config.php-dist config.php
// ... und bearbeiten:
nano -w config.php

Hier die Datenbankeinstellungen unter DB_TYPE (mySQL), DB_HOST(localhost), DB_USER (Username), DB_NAME (Datenbankname), DB_PASS (Passwort) anpassen.
Genaueres findet ihr im Uberspace WIKI. Ausserdem auch automatische Feed Aktualisierung, Plugins und Import.

Der Zeitaufwand beträgt etwa: 15 Minuten.

Themes & Plugins

TT-RSS bringt bereits ein Theme mit, welche sehr an den klassischen Google Reader erinnert. Ansonsten gibt es im TT-RSS Forum eine sehr unübersichtliche Sammlung an Themes, z.B. GReaderish, Google Reader (modern), Simple Grey, Mountain Lion, 3 Col Gallery, Another Google Reader Theme.
Bei mir läuft übrigens “Mountain Lion”, aus dem einfachen Grund weil ich große Typo mag. Ansonsten einfach das Theme.css (+ Ordner) in den /theme/ Ordner ziehen und in den Einstellungen auswählen.

Mit Plugins verläuft es ähnlich, einige sind bereits vorinstalliert und müssen nur noch per Checkbox aktiviert werden (bzw. bei einigen in der config.php hinzugefügt werden). Ansonsten mal hier oder hier gucken und in euren /plugins/ Ordner ziehen.

Apps

Eigentlich dass wichtigste Thema – mobile Applikationen. Der auch für mich bevorzugte Weg des Lesens. Es gibt

  • eine TT-RSS App für Android
  • YATTRSSC für Android und iOS (sieht mir aber sehr nach jQuery Mobile aus)
  • GReader Pro – Eine Betaversion, noch nicht im Play Store erhältich

Desweiteren bringt TT-RSS auch gleich ein mobiles Layout. Dieses unter Plugins aktivieren. Ich denke in nächster Zeit werden noch viele weitere Applikationen auf den Markt kommen. Bislang fahre ich aber mit GReader Pro sehr gut – ärgere mich sogar, dass ich schon nicht viel früher auf diese App umgestiegen bin.

Warum

Ich habe den Google Reader hauptsächlich als Sync Dienst genutzt, mit dem Vorteil dass gleich eine performante App mitgeliefert wird, aber man nicht an dieser gebunden ist. Zwar hab ich mich auch an Feedly versucht, die sicherlich mit Geschwindigkeit überzeugen, aber ich mich mit der Android App einfach nicht anfreunden konnte.
Zu bunt, zu wenig anpassbar und eingeschränkt und zu unübersichtlich.
TT-RSS aber bietet mir genau dass was ich wollte: Anpassbarkeit, Offenheit und bessere Kontrolle. Und im Zusammenspiel mit den Dienst von Uberspace (ehrlich, guckt die euch an – die Jungs verdienen jeglichen Support) macht es echt Spass.

ptb / flexgrid →

Ein Gridsystem dass auf Flexbox aufsetzt, als Fallback das Bootstrap 3 Grid nutzt und – wenn alle Stricke reissen (IE, ich schau dich an) – ein statisches Layout nutzt. Dazu kommt, dass das Grid (gepackt, zusammen mit Modernizr) auf 3,6kb passt.

ArtikelDemoGithub

Devs rally against mobile web doorslams →

.net:

Speaking to .net, Opera’s Bruce Lawson noted how absurd doorslams, redirects and content restrictions would be elsewhere: “Every time you turn on your TV to watch your favourite movie, how about I stand in front of it and tell you the plot instead? Or, when you open a book, I put my hand over the page and tell you what it’s about? Or when you’re listening to your favourite music, I come round and sing it down a megaphone into your ear — just fragments, with a kazoo? Rubbish, isn’t it? Then stop doing it to the web.”

Es geht um dieses unsagbare Verhalten, einen User der mobil eine Seite besucht erstmal mit einem modalen Dialog zu nerven blockieren begrüßen doch bitte die native App auszuprobieren. Dieses stellt eine Seite für mich fast auf selbiges Niveau wie großflächige Werbeoverlays. Es ist ein weiterer Klick der mich abhält an eine Information, Artikel oder sonstigen Inhalt zu kommen – auf einer Seite die ich mit großer Wahrscheinlichkeit nicht regelmäßig besuche.

Oder wie es im Artikel steht:

“doorslams are the new skip intro” – Aral Balkan

I cannot design or code a responsive website →

Nick Jones, .net Magazine

If you don’t know the rules and who you need to impress, how can you expect to make something that people will respond positively to? You can’t. So don’t even try. Read a book about it. Take a couple of Lynda courses. There are lots of opinion pieces like this one. Keep reading those. Don’t start making anything yet. You’ll do it all wrong. Don’t discuss it with informed people or you’ll sound stupid. Your opinions are not valid. You don’t know what you’re talking about and you have bad taste.

If these thoughts had won, if I had let them consume me, I’d still have the Flash site I had for the last five years. I read a little of @beep’s book until I got the general idea. I still wasn’t prepared to code my own responsive site. I didn’t know how to do it right, so first I did it wrong. After I had done it wrong a few times, things started to work. It’s not perfect, but it works. I still don’t know the right way to do anything but I don’t worry about that anymore. Now I just hack and hack and trust that I’ll arrive at a solution. Sometimes it even makes sense.

Nick Jones hat für das .net-Magazin einen Artikel über das Erstellen seiner neuen Webseite geschrieben. Im Wesentlichen seine Gedankengänge – seine Ängste – sich mit etwas neuen zu beschäftigen. Und solche Gedanken zu überwinden um sich mit dem Thema auseinanderzusetzen. Und was am Ende zustande kam ist sehr beeindruckend. Eine schöne, reaktionäre Webseite, die abseits der üblichen Muster und Paradigmen existiert – vielleicht war die Losgelöstheit vom Thema sogar vom Vorteil.

Über Nick Jones Webseite habe ich vor ein paar Jahren schon gestaunt – sie brillierte mit cleverer Typographie und einer Mischung von Detailverliebtheit und Verspieltheit. Ich könnte sie trotz der langen Zeit immer noch beschreiben (Hier ein Snapshot der alten Version aus dem letzten Jahr).

geuis/helium-css →

Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.

Javascript Tool, dass unbenutztes CSS erkennt. Einbauen, URLs eintragen und ggf. einfach mal aufräumen.

CSS: Everything is global and how to deal with it →

Philip Walton, Adobe Dev Connection

In this article I’ll talk about some strategies for dealing with the global nature of CSS. I talk about finding the balance between paranoid over-protection and just asking for trouble. I’ll also talk about some exciting things already making their way into the CSS spec that will provide real encapsulation in the future.

Philip Walton gibt Einblicke und Tipps für das Arbeiten an größeren CSS Architekturen, Frameworks und andere Dinge.

Alternativen zum Google Reader

Google hat heute bekannt gegeben, dass der Google Reader zum 1.Juli 2013 eingestellt wird. Für mich persönlich eine Hiobs Botschaft, die ich absolut nicht nachvollziehen kann. Der Reader ist für mich die fast meistgenutzte Software. Ob Desktop oder Smartphone – kein Tag ohne kurzes Lesen der Feeds.

greader-shutdown

Nun, man kann jetzt entweder rumjammern oder Alternativen suchen. Ich habe mich dann für zweiteres entschieden. Es gab schon vorher viele Alternativen und mit dem Wegfallen des Google Produkts wird es noch viele mehr geben.

Eure Google Feeds könnt Ihr übrigens hier exportieren. Ihr bekommt ein großes Datenpaket, größer als es sein sollte. Hier geht es schneller, ihr bekommt nur die XML Datei.

Anmerkung: Ich behandele hier nur webbasierte Software. Sicherlich gibt es auch gute Offline Feedreader – nach so etwas suche ich aber nicht.

Feedly

Feedly.com Feedly nutze ich schon seit einigen Jahren als Zweit Reader. Bislang war Feedly für mich eher ein alternatives Interface in Magazin Look und erweiterten Features wie besseres Teilen und Integration von verschiedenen Read-Later Services. Auch hat man bereits seit einiger Zeit die Vermutung, dass Google diesen Weg geht und ist bestens vorbereitet. In einem Blogbeitrag wird das Projekt Normandy vorgestellt, dass einen reibungslosen Übergang garantieren soll. Hierfür wurde die Google API geklont und ab Juli problemlos weiterlaufen. Im Wesentlichen braucht man sich jetzt nur einmal anmelden. Wahrscheinlich die einfachste Lösung.

Ausserdem ist Feedly für alle gängigen Desktop und Mobilplattformen verfügbar.

Newsblur

NewsBlur Newsblur sieht vielversprechend aus und ähnelt dem Google Reader in vielen Belangen. Für mich persönlich etwas zu unübersichtlich, bringt dafür viele Optionen mit. Zusätzlich gibt es noch ein Premium Angebot für 1$/Monat. Verfügbar auf iOS und Android.

Good Noows

Good Noows Hinter dem etwas sperrigen Namen “Good Noows” verbirgt sich ein hübscher, vielseitiger Webclient, der wie Feedly verschiedene Ansichten mitbringt. Feeds kann man mit OPML importieren. Mobile Apps scheint es nicht zu geben.

Netvibes

netvibes Netvibes soll gut sein – aber ganz ehrlich. Sehr unübersichtlich und ich hatte schnell keinen Bock mehr drauf. Steht hier aber der Vollständigkeit halber. Screenshot kommt von Lifehacker.

The Old Reader

oldreader The Old Reader hatte ich bis zum Schreiben dieses Artikels noch gar nicht gekannt. Schade – denn es ist jetzt schon einer meiner Favoriten. Optisch ist es der (alte) Google Reader mit kleinen Änderungen und auch sonst wird sich der geneigte Wechsler sehr schnell an diesen Reader gewöhnen. Konnte es leider nicht wirklich testen, da die Server gerade überlastet sind und ich meine Feeds nicht importieren konnte.

Auch gibt es keine mobile App. Dafür ist die Seite Responsive und passt sich dem Bildschirm an. Vielleicht kann der ein oder andere damit leben.

Fever

Fever Fever ist eine selbst gehostete Lösung. Und kostet einmalig 30$. Hat aber den Vorteil, dass man nicht mehr von Drittanbietern abhängig ist. Im mobilen Bereich ist die Sache nur für iOS User interessant, da es zur Zeit keine Apps für andere Plattformen gibt – und auch nicht geplant ist. Testen kann man es leider nicht – aber hier gibt es eine Demo.

Tiny Tiny RSS

Ein weiterer selbstgehosteter RSS Reader: Tiny Tiny RSS. Es wird also ein Webserver benötigt und etwas Ahnung von der Materie. Werde es mal testen und dann mehr dazu schreiben.
Bringt eigene Android App mit.

Noch mehr?

Sicherlich – aber dass sind die Tools die ich auf die Schnelle finden konnte. Ggf werde ich diesen Artikeln in den nächsten Tagen noch aktualisieren. Wenn Ihr noch weitere Tipps habt, schickt mir eine Mail oder schreibt einen Kommentar.

Und?

Warum Google diesen Schritt geht, bleibt Spekulationssache. Google ist schon länger dabei, diverse Dienste einzustellen – wobei es sich hier meist um Nischen Projekte gehandelt hat. Vermutlich soll hier Google+ und Currents gepusht werden. Vielleicht hat es auch was mit der Einstellung von Adwords für Feeds zu tun. Wie dem auch sei – es gibt bereits eine sehr schnell wachsende Petition auf change.org. Evtl. Interessierte sollten also mitmachen – vielleicht bringt es was.



Achievement accomplished
You now have 30 lives.
Use them wisely, my friend.

Konami Easter Egg by Adrian3.com