Abend 13: 17.08.2016 - HTML/CSS Engineering in Practice: Automatisierung/Frameworks

Webpack ist ein Module Bundler für JS der Module in commonjs, AMD und es6.

Über loader und plugins können auch andere Sprachen eingebunden werden.

Der Schwerpunkt von Webpack liegt bei der effizienten Erstellung von zu deployenden Bundles.

Gulp ist ein Taskrunner auf der Basis von JS und Streams.

Webpack kann Gulp teilweise ersetzen.

Sourcemaps sind in Gulp besser unterstützt.

Grunt: Der Fokus liegt auf der Konfiguration von fertigen Aufgaben

Gulp: Der Fokus liegt auf dem Programmieren von komplexen Pipelines (benutzt node.js streams)

Allgemein: Beispiel JavaScript
• (Tests ausführen)
• Linting  
• Concatenation
• Minifizierung

Mit Gulp:

var  gulp = require('gulp'),
   jshint = require('gulp-jshint'),
   concat = require('gulp-concat'),
   uglify = require('gulp-uglify');

gulp.task('js', function() {
return gulp.src('source/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(concat('main.js'))
      .pipe(uglify())
      .pipe(gulp.dest('build/'));
});

Antwort:

1)

Beschreibung:

http://sass-lang.com/guide

Vorteile:

• Rapid Prototyping
• Browser-Support
• Community

Nachteile:

• Code Bloat
• Visuelle Anpassungen notwendig
• Code Style
• Lernkurve

Wenn möglich externe Fonts immer über ein <link>-Element anstelle von @import einbinden. Mit der @import Option wird eine Seite komplett blockiert, falls das CDN des Anbieters nicht verfügbar ist.

Sass-Partials*) werden mit einem Underscore am Beginn des Filenamens gekennzeichnet. Der Underscore bedeutet zudem, dass von diesem File keine CSS-Version generiert werden soll.

Beim Einbinden des Partials via @import in eine andere Sass-Datei werden der Underscore und die Dateierweiterung weggelassen:

Beispiel
Dateiname:

_fonts.scss

@import-Anweisung:

@import 'fonts';

*) Definition „Partial“ aus der Sass-Doku (http://sass-lang.com/guide): "You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive."

WOFF2 und WOFF

 /* Current versions of Chrome, Firefox, Opera
url('webfont.woff2') format('woff2')
 /* IE9+, Safari 5.1+, iOS 5.1+, Android 4.4+
url('webfont.woff') format('woff')

Neue CSS-Regeln, die noch nicht zum offiziellen Standard gehören, werden von den Browser-Herstellern mit einem Prefix als "private Regeln" gekennzeichnet.

Beispiel (Quelle: http://shouldiprefix.com/#flexbox)

.page-wrap {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

Sobald ein Standard offiziell definiert und von einem Browser implementiert ist, wird der Prefix nicht mehr benötigt. Damit ältere Browser die Angabe trotzdem verstehen, empfiehlt es sich, die CSS-Regel für eine gewisse Zeit trotzdem mit Prefix anzugeben.

Ein Autoprefixer fügt die browserspezifischen Prefixes automatisch ein, indem er z.B. die Regel von Can I Use verwendet. Er wird im Build-Tool / Task-Runner als Postprozessor verwendet, d.h. er nimmt CSS als Input und gibt wieder CSS aus.

1. FOIT (flash of invisible text): Der Browser zeigt den Text nicht an.

2. FOUT (flash of unstyled text): Der Browser zeigt den Text in einer anderen Schrift an

Der Browser versucht zuerst, die Webfont zu laden, bevor er den Text anzeigt (FOIT). Konnte er die Webfont in einer bestimmten Zeit (Timeout) nicht laden, zeigt er den Text in einer anderen Schriftart an (FOUT). Beim Internet Explorer beträgt das Timeout 0 Sekunden, d.h. der Text wird sofort in einer anderen Schriftart angezeigt. Der Safari verhält sich genau umgekehrt: er zeigt den Text erst dann an, wenn die Webfont geladen werden konnte (es gibt kein Timeout).

• Ist das Framework wirklich nötig, oder lassen sich die Funktionen ohne grossen Aufwand selber realisieren oder sind sie sogar in einem anderen Framework welches schon im Einsatz ist vorhanden?
• Muss ich das ganze Framework laden oder lassen sich Teile davon nutzen?
• Wie gross ist das Framework (Downloadzeit) ?
• Gibt es Überschneidungen mit anderen eingesetzten Frameworks?
• Wie gross ist die Community? 
• Wird das Framework weiterentwickelt?
• Wie gut ist die Dokumentation?
• Wie gross ist der Verbreitungsgrad?
• Opensource? Lizenzkosten?
• Welche Frameworks gibt es für den erforderlichen Task(s)? http://www.javascripting.com/

• Linting
• Concatenation 
• Minifizierung
• Uglifying
• Sass/Less Compilation
• Rename Files
• Unit Testing
• ....

- Sass
- Less
- Stylus

CSS:

a {

  color: #73c92d;

}

.highlight {

  background-color: #73c92d;

}