„Enough with the fatigue – tips against feeling overwhelmed“

Dr. Axel Rauschmayer schreibt in seinem Artikel JavaScript fatigue fatigue (bezogen auf Javascript) ziemlich genau, wie ich es schon lange versuche zu halten. Webentwicklung ist inzwischen ein so breites Feld, dass man nicht mehr alles wissen kann – und auch nicht muss. Mich packt es ziemlich oft, dieses ungute Gefühl irgendwie nicht all den neuen krassen Scheiß zu beherrschen. Aber eigentlich muss man das nicht. Danke für den guten Text und die spitzen Tipps.

Richard’s Toolbox

Richards Toolbox sammelt insgesamt 57 Tools zu den Themen „for webmasters“, „URL driven“, „for programmers“, „IP driven“, „for software testers“, „for marketeers“ und „SEO“. Da ist also tatsächlich für jeden was dabei. Praktisch!

Eine WordPress-Entwicklungsumgebung mit Docker

Öfter mal was Neues: Als ich letztens mein MacBook neu aufsetzte, entschied ich mich noch einmal mit Docker rum zu probieren, als es darum ging eine WordPress-Umgebung aufzusetzen. Meine letzten Experimente waren zwar seinerzeit zwar in so weit erfolgreich, als das alles zwar prinzipiell klappte. Aber irgendwie war dann die Geschwindigkeit der Umgebung nicht so toll, als dass ich damit wirklich arbeiten wollte.

Dieses Mal bin ich mit dem Ergebnis ganz zufrieden: WordPress mit Docker auf Bitbucket. Am Ende war das alles gar kein Hexenwerk. Ich baue keine eigenen Container, sondern habe nur bestehende Standard-Container dazu gebracht zusammen zu arbeiten und einen Ordner für das Theme hinein gemounted. Lokal brauche ich so neben der Docker-Installation nur Git um alles ans Laufen zu bringen.

Es gibt Skripte zum Starten und Stoppen der Docker-Maschine und der Entwicklungsumgebung. Am Ende läuft dann in einem der Container ein Gulp-Watcher und sogar Live-Reloading funktioniert, sofern man eine angepasste Variante der Chrome-Erweiterung nimmt.

Ein bisschen allgemeiner könnte es alles noch sein, im Moment gehen wir mal davon aus, dass ich immer an meinem „ms-theme“ arbeiten möchte. Zusammen mit einer kleinen Überarbeitung und Zusammenfassung der Konsolenbefehle könnte man da über ein Namespacing verschiedene Projekte abfrühstücken.

Flexbox Froggy

Flexbox ist ja so ein bisschen die Antwort auf viele der Schmerzen, die ich in meiner Laufbahn bisher so hatte. So richtig wohl fühle ich mich im Umgang damit aber noch nicht, was wohl zu aller Erst an der mangelnden Routine liegen mag.

Flexbox Froggy ist ein kleines Browserspiel, dass einem in 24 Leveln die Funktionalität von Flexbox und seine Möglichkeiten ein wenig näher bringt. Mir hat es geholfen.

Git: Dateien im Repository vom Diff ausschließen

Es stört mich schon länger, dass ich beim Diff vor dem Commit immer über allerlei automatisch generierte und minifizierte Dateien scrollen muss. „Sowas wie .gitignore für das Diff, das wäre es!“

Dabei ist die Lösung ganz einfach: Man legt eine Datei mit dem Namen .gitattributes in den Root des Repositorys. Darin lässt sich Allerlei rund um Git einstellen. Um mein aktuellen Problemchen zu lösen, fügte ich einfach folgende Zeilen ein:

*.map -diff
*.min.* -diff
main.css -diff
sprite.symbol.svg -diff

Mit dem Parameter -diff schließt man die Dateien aus. Im Beispiel sind das alle Sourcemaps, minifizierte Dateien, das aus SCSS-Dateien generierte Stylesheet und ein SVG-Sprite. Und schon zeigt mir der Diff nur noch die für mich relevanten Dateien an. Natürlich stehen die so ausgeschlossenen Dateien weiterhin unter Versionskontrolle. Über die Datei lassen sich noch mehr Dinge steuern, das muss ich mir bei Gelegenheit noch einmal genauer anschauen.

5 Things You Might Not Know About the CSS Positioning Types

In seinem Blogpost 5 Things You Might Not Know About the CSS Positioning Types erklärt George Martsoukos ganz nebenbei sehr schön die Grundlagen der CSS-Positionierung und hat auch immer ein schönes Beispiel dazu parat.

SCSS kompilieren mit libSass und Gulp

Als ich dieser Tage mein neues „Spaßprojekt“ an den Start brachte, habe ich Abstand vom SCSS-Framework Compass genommen. Damit habe ich die letzten Jahre eigentlich immer meinen SCSS-Code nach CSS kompiliert. Bis auf wenige CSS3-Mixins habe ich aber vom Framework selbst kaum Nutzen gezogen. Und die Dokumentation fand ich schon immer eher ein bisschen blöd. Deshalb ist es nun libSass geworden, eine C/C++-Implementierung von SASS. Damit spare ich mir dann nämlich auch Ruby komplett.

Zum Kompilieren des CSS nutze ich nun einen kleinen Gulp-Task, der mir bei der Gelegenheit direkt auch noch eine Sourcemap schreibt. Statt der Compass-CSS3-Mixins ist nun autoprefixer im Einsatz, aber da werfe ich bei anderer Gelegenheit mal einen ausführlichen Blick drauf.

var gulp = require('gulp'),
    scss = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    prefix = require('gulp-autoprefixer'),
    
var scssSource = './source/scss/**/*.scss';
var scssDest = './';

gulp.task('scss', function() {
    gulp.src(scssSource)
        .pipe(sourcemaps.init())
        .pipe(scss({sourcemap: true, outputStyle: 'compressed'}).on('error', function (e) {
            console.log(e);
        }))
        .pipe(prefix("last 1 version", "> 1%"))
        .pipe(sourcemaps.write(scssDest))
        .pipe(gulp.dest(scssDest));
});

Alles, was es für diesen einfachen Task braucht, gibt es natürlich beim npm:

Noch ein Burger-Menu-Button

Am Wochenende hatte ich ein bisschen Zeit zum Spielen und so ist diese kleine Animation entstanden:

See the Pen Simple Burger by Martin Schneider (@schneyra) on CodePen.

Mit Hilfe von ein wenig Javascript wird beim Klick auf das Burger-Icon eine weitere CSS-Klasse gesetzt (oder entfernt). Die Änderungen an dem Element werden mit ein bisschen CSS animiert. Kein Hexenwerk. Mit den vielen Bewegungs-Möglichkeiten, mit denen man zwei Striche in ein Kreuz verwandeln kann, lässt sich allerdings auch mal gerne ein Nachmittag verplempern.

Ich mag besonders, dass das Icon mit nur einem HTML-Element realisiert ist und völlig ohne Grafiken auskommt. Die beiden Balken des Icons sind jeweils die border-bottom des before– und after-Pseudoelementes des verwendeten span. Vorbild war, das muss man ja dazusagen, der entsprechende Knopf in der mobilen Ansicht auf der aktuellen Apple-Webseite.

Dealing with long words in CSS

Michael Scharnagl schreibt in seinem Beitrag Dealing with long words in CSS über den Umgang mit langen Wörtern in CSS. Er zeigt die verschiedenen Herangehensweisen auf und hat am Ende sogar eine recht umfassende Lösung parat. Danke!

serve — Webserver to go

Auf meinem MacBook habe ich den OSX-eigenen Webserver zu Gunsten von aufwändigeren Konstrukten deaktiviert. Manchmal braucht es aber doch einen kleinen Webserver, zum Beispiel um mal schnell eine Kleinigkeit HTML und CSS auszuprobieren.

Node.js habe ich natürlich installiert und so habe ich nach einmaliger Installation mit serve auch immer einen kleinen Webserver zur Hand. Ein simples serve im Terminal startet diesen in einem beliebigen Ordner. Standardmäßig läuft der Server auf Port 3000, er ist also über http://localhost:3000 im Browser erreichbar.