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)

(weiterlesen …)

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.

Zurb Foundation 4

Zurb Foundation ist in Version 4 erschienen. Es wurde viel verändert und die Migration von Foundation 3 auf Foundation 4 ist sicherlich etwas schwierig. Die wichtigsten Änderungen finden beim Grid, in der Semantik und im Javascript statt.

Mobile First Grid

Das umfangreiche Prototyping Framework hat jetzt eine “Mobile First” Ausrichtung – was aufgrund der stark anwachsenen Mobilnutzung ein richtiger Schritt ist. Allerdings funktioniert das Gridsystem jetzt signifikant anders.

small und large

Die grid-bildenden Klassen heissen jetzt small-x und large-x. Es wird bis zu einer Breite von 768px die small Klasse benutzt, alles darüber hört auf large. Ein Beispiel wäre also.

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>

Das exklusive nutzen von small oder large ist auch möglich. Wobei ich mir hier eine Nutzung der alten Syntax auch noch gewünscht hätte.

Verschachtelung (Nesting)

Natürlich ist Verschachtelung auch noch möglich. Dafür wieder ein row mit anschließender Breitendefinition einfügen.

<div class="row">
  <div class="small-8 columns">8 Nested
    <div class="row">
      <div class="small-8 columns">8 Nested Again</div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>
Offset, Centered, Push

Offset – also der Abstand zwischen Grids – ist jetzt unter large-offset-x und small-offset-x verfügbar.

<div class="large-10 large-offset-1 columns">10, offset 1</div>

Das Zentrieren eines Gridelements funktioniert jetzt mit large-centered und small-centered. Wie gehabt wird small durch large überschrieben – sofern eins vorhanden ist.

<div class="small-6 small-centered columns">6 centered</div>

Dies ist nur ein kurzer Ausriss – das neue Grid bringt auch noch neue Optionen mit. So lassen sich über die SCSS Konfiguration viele Möglichkeiten ein und ausstellen.

Grid Dokumentation


Semantik

In der neuen Version wurde die Semantik verstärkt und der ausgegebene Quellcode ist dadurch übersichtlicher. Beschreibene Klassen wurden entfernt und durch eine Reihe von SASS Mixins und Erweiterungen ergänzt.

Beispiel: Panel Möchte man einen Panel Bereich definieren kann man entweder die vordefinierte panel Klasse nutzen oder einen semantischen Bereich mit einen SCSS Mixin verwenden.

Zuerst importieren: @import "foundation/foundation-global", "foundation/panels"; Dann erweitern: .your-class-name { @include panel; }

Jedes Mixin hat dazu noch Variablen, welche überschrieben werden können.

.your-class-name { @include panel($bg, $padding); }

$bg: $secondary-color
$padding: $panel-padding

Diesen Ansatz mag ich – allerdings fände ich persönlich Platzhalter besser – habe ich hier bereits einmal beschrieben. Warum? Weil hier der Import grundsätzlich wegfallen könnte.


Zepto statt jQuery

Die größte und kontroverseste Neuerung ist – dass die mitgelieferten Plugins nicht mehr auf jQuery sondern auf Zepto.js basieren.

Die Vorteile sind (fast 1:1 von der Zepto Webseite übernommen)… – die sehr geringe Dateigröße gegenüber jQuery – veraltete Browser werden nicht mehr unterstützt – deswegen die geringere Dateigröße – die gute Integration in nativen Webapps

Mehr kann ich zu Zepto allerdings nicht sagen, da es mir bis dato sehr unbekannt war. Die Syntax sieht der von jQuery recht ähnlich.

Für mich allerdings ein Stolperstein, da ich – und viele andere – noch nicht wirklich mit Zepto in Kontakt gekommen sind, stellt es eine Barriere dar. Schnelles Anpassen dauert jetzt etwas länger und der geneigte Entwickler wird wahrscheinlich lieber seine eigene jQuery Lösung einbauen anstatt Zepto zu nutzen. Kommt schließlich sehr oft vor dass der Prototyp in der späteren Entwicklung direkt in das Produkt einfließt.

BrowserRefresh Plugin (Sublime Text 2) →

Eine Alternative zu LiveReload. Die Seite wird erst über einen Shortcut aktualisiert also nicht jedesmal neu geladen. In einem kurzen Test hat es gut funktioniert – teilweise sogar besser gefallen, da ich nicht wirklich immer eine schnelle Vorschau brauche wenn ich speichere.

Habe ich mal meiner Sublime Text Plugin Sammlung hinzugefügt – welche ich auch etwas überarbeitet habe (und dabei mein Kommentar CSS verloren habe …. )

Typeplate →

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.

Im heutigen dynamischen Web ist der wichtigstes Faktor eindeutig Typographie. Einer der ersten Aufgaben sollte es sein Entscheidungen der Schriftgröße und Farben zu setzen, ein Schritt der gut überlegt sein soll – und ich persönlich auch oft nur durch viel testen und justieren erreiche. Typeplate setzt genau hier an und bietet ein kleines Framework für die Webtypographie – und macht dabei auf 3kb vieles richtig.

Im empfehle mal die einzelnen Komponenten genauer anzuschauen – hier werden viele Best Practices angewendet. Und selbst wenn Typeplate an sich nicht im nächsten Projekt genutzt wird, kann man sicherlich einige Dinge übernehmen.

Smashing Magazine geht hier noch etwas weiter ins Detail und ein Demo gibt es hier.

Learn Git Branching →

Wer auch nur im Ansatz professionell Software entwickeln will, sollte sich mit Versionierung auseinandersetzen. Learn Git Branching gibt einen guten Überblick über die Basics und erlaubt einen schnellen interaktiven Einstieg in die Welt von Git.
Einfach mal probieren.

DRM for the Web? Say It Aint So →

Other problems specific to the current draft of the proposal include the fact that it might well be impossible for open source web browsers to implement without relying on closed source components

Leider scheint es, als ob zur Zeit Digital Right Management (DRM) in HTML5 Video implementiert werden soll. Scheinbarer Grund: Der User soll nicht mehr auf Third Party Plugins wie Flash und Silverlight angewiesen sein – was noch sehr oft genutzt wird um die Rechte der Copyright Inhaber zu gewährleisten (lässt sich sehr schön bei bspw. bei Lovefilm sehen. Wenn nun ein DRM Mechanismus in einem Open Source Projekt integriert wird, kann es nicht mehr sein, dass Software Open Source ist – denn ein DRM System ist “nicht funktionsfähig” wenn der Code eingesehen werden kann (neben der Tatsache, dass DRM sowieso nicht funktioniert).

Tim O’Reilly übrigens dazu:

On Alt Text →

As we crafted our templates, we discovered many places where an alt text would have been redundant, offering a blind user no new information not already provided by the page’s HTML text, and merely annoying that user with needless redundancy. Markup is an art, and the soul of that art (as with all design) consists of creating the best possible experience for the user.

Im aktuellen A List Apart Redesign hat man sich mit Alt Tags und Screenreadern auseinander gesetzt. Mit dem Ergebnis, dass das Alt Tag im Redundanz erzeugen. Nicht generell, nicht immer – aber es kommt vor.

Diesen Blog auf Google Currents verfolgen

Der eine oder andere nutzt vielleicht Google Currents als Newsreader. Darum habe ich eine Ausgabe auf Google Currents erstellt, den man hier folgen kann. Dabei habe ich die Beiträge so geordnet dass Artikel und Links getrennt sind – und hab somit endlich mal mein WordPress Backend aufgeräumt.

currents

Persönlich nutze ich übrigens diesen Service kaum, da RSS für mich die deutlich bessere Alternative darstellt. einfacher verfügbar ist und mir die Übersicht im Feedreader auch besser gefällt.

Das Erstellen einer Current Ausgabe ist übrigens denkbar einfach – Caschy hat es hier ganz gut beschrieben.

Sublime Text 3 Beta

Mein favorisierter Text Editor Sublime Text geht in die Version 3. In Sublime Text Blog hat Programmierer Jon Skinner die erste Beta Version, zusammen mit weiteren Informationen, veröffentlicht. Der Download ist allerdings nur für registrierte Benutzer – also für Inhaber eines Sublime Text 2 Lizenz. Deswegen habe ich mal die Beta Version installiert und ausprobiert.

Features

Symbol Indexing

Sublime Text kann jetzt einen Symbol Index aufbauen, was das direkte Springen zu Symbolen und Definitionen vereinfacht. Dies war vorher nur begrenzt möglich, z.B. wenn man bei Goto Anything (Strg + P) in der Suche ein @ Zeichen vorsetzt.
Einen ähnlichen Weg geht das Goto-Symbol Plugin für die Version 2.

Goto Symbol in einer CSS Datei in Sublime Text 3

Pane Management

Das Arbeiten mit mehreren Tabs (oder Panes) bietet jetzt mehr Möglichkeiten. Das Öffnen und Schließen eines neuen Tab- oder Gruppenansicht ist jetzt vereinfacht worden.

Working with multiple panes is now more efficient, with commands to create and destroy panes, and quickly move files between panes. You can see the new options under View/Groups, View/Focus Group and View/Move file to Group.

Speed

Sublime Text 2 war schon schnell, aber Version 3 soll noch schneller sein. Das kann ich auch bestätigen – öffne ich ST2 unter OSX, dauert es ca. 3-5 Sekunden. ST3 scheint unmittelbar nach dem Klick offen zu sein.
Ich muss dazu sagen, dass ich beide Applikationen vorher offen hatte, also wohl noch im Systemspeicher waren, trotzdem bin ich beindruckt.
Plugins sollen angeblich auch das Startverhalten nicht mehr beeinflussen. Hierzu kann ich nichts sagen – Package Control wird noch nicht unterstützt und jetzt alle meine Plugins zu installieren kommt nicht in Frage – hierfür bin ich zu sehr von Package Control verwöhnt.

API

Die API basiert jetzt auf Python 3.3. Plugins mit nativen Python Code, sollen nicht mehr den Hauptprozess stören und die ganze Anwendung ist stabiler. Kenne mich mit der Materie zu wenig aus – für Pluginentwickler also die Originalmeldung:

Sublime Text now uses Python 3.3 for plugins, and runs them out of process, so any plugins that load native code no longer risk crashing the main Sublime Text process. The API is also fully thread-safe, and provides several callbacks that run asynchronously (e.g., on_modified_async). There are also new API functions, including full access to the project data. Sublime Text 2 plugins will require porting to work with Sublime Text 3, however in most cases the changes will be small.

Ansonsten:

Der komplette Changelog findet sich hier.

Preis

Vorweg – Sublime Text 3 wird teurer. Kostete die derzeitige Version noch 59$ (umgerechnet 43€), werden in Zukunft 70$ (52€) verlangt. Laut Skinner die erste Preiserhöhung seit 5 Jahren. Preislich zwar günstiger als die (Mac) Konkurrenz Coda 2 (99 Euro) und Espresso (75 Euro), wird dieser neue Preis trotzdem einige Leute abschrecken.

Auch Sublime Text 2 wird ab jetzt zu dem neuen Preis erhältlich sein. Jeder Kauf zum neuen Preis beinhaltet aber automatisch die Lizenz für Version 3. Sublime Text 2 Käufer können den Nachfolger in der Beta Version bis zur Veröffentlichung kostenlos testen. Danach gibt es den Updatepreis von 15 – 30 Dollar, abhängig vom Kaufdatum.

Eine öffentliche Testversion soll es bald geben – ob diese wie der Vorgänger zeitlich unbegrenzt getestet werden kann, bleibt abzuwarten. Persönlich hoffe ich, dass dem so ist – denn auch wenn ich die Testversion unbegrenzt testen konnte, war mir klar, dass ST2 sein Geld wert ist und der Kauf für mich schon moralisch verpflichtend war. Aus Gesprächen mit anderen Nutzern habe ich erfahren, dass ich damit nicht alleine stehe.

Und?

Die Neuerungen sind bisher lesen sich ganz interessant, hauen mich persönlich aber nicht vom Hocker. Die Startzeit ist beindruckend, soviel ist sicher, aber für ein Upgrade fehlen mir persönlich noch einige Killer Features. Da es aber erst der Beginn der Beta ist, ist sicherlich noch mit einigen hübschen Dingen zu rechnen. Die letzte Beta hat in meiner Erinnerung 1,5 Jahre gedauert. Ich bleib gespannt.

Links

Defending Presentational Class Names →

Philip Walton, Codrops:

The use of presentational class names in web development has been considered a bad practice for about as long as classes have been around. The notion is so ubiquitous that when making that claim, few people even bother to justify it anymore, as if it’s self-evident.

Bad Practices are killing us – Dieser Beitrag behandelt, trotz der Überschrift beide Seiten. Ich persönlich bin kein Fan von beschreibenden CSS Klassen, es bringt einfach zuviele Probleme mit sich, trotzdem werden einige interessante Punkte aufgezählt.

Redesigning Google: how Larry Page engineered a beautiful revolution →

The Verge:

We went to Google looking for the person responsible for the new design direction, but the strange answer we got is that such a person doesn’t exist. Instead, thanks to a vision laid out by a small team of Google designers, each product team is finding its way to a consistent and forward-looking design language thanks to a surprising process.

The Verge war bei Google. Interessante Einsichten über das neue funktionierende Redesign und warum Google jetzt auch auf ein gutes Design achtet.

The Post-PSD Era →

Brad Frost:

Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. Pixels get pushed, details are sweated, pages are printed out, hung on walls, and presented to clients. Clients squawk their feedback, then designers act on it. They repeat this dance until everyone is content or until nobody gives a shit anymore, which happens more often than you’d think. Only then do those pristine comps get handed more like shoved over to developers to build.

Brad Frost über den Einsatz von Photoshop im heutigen Webdesign. Auf kurz oder lang wird er sicherlich Recht bekommen – denn das Schubsen von Pixeln und Ebenen ist ein Relikt des bisherigen “Eine-Seite-für-Alle” Webdesign Prozesses, aber nicht mehr für das immer populärer werdende Cross Device Development.



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

Konami Easter Egg by Adrian3.com