DO EPIC SHIT!

Slides | Demo (source)

Auf der OpenRheinRuhr (Messe mit Kongress rund um das Thema „Freie Software“) habe ich meinen ersten öffentlichen Vortrag gehalten. Dazu habe ich das Thema „Open Source Workflow für Webentwickler“ gewählt und mit dem doch sehr einprägsamen Titel „DO EPIC SHIT!“ angekündigt.

B16GnDZIcAA3aRb

Gegen alle Erwartungen bin ich pünklich angekommen, auch wenn die Bahn (GDL) gestreikt hat. Also hatte ich noch etwas Zeit, um noch einen `git commit` vorzubereiten, welcher dann live in dem Vortrag automatisch via Jenkins getestet und deployed werden konnte.

Und auch wenn ich den Vortrag nicht so beenden konnte wie ursprünglich geplant, da ich die Zeit irgendwie falsch eingeteilt hatte, hoffe ich trotzdem einiges nützliches gezeigt zu haben. Beim nächsten mal sollte ich dies wohl vor „echtem“ Publikum testen, da die Zeit dann anscheinend anders verläuft. ;) Einige Erklärungen und Beispiele von der Demo-Webseite musste ich daher unterschlagen und reiche diese Infos im folgenden nach:

Backend:

Frontend:

Extras:

PS: Ich werde heute wieder auf der OpenRheinRuhr sein, da auch das heutige Programm sehr interessante Vorträge und Workshops biete. z.B.: DockerSaltStackImageMagick. Gegebenenfalls sieht man sich dort :) wünsche allen Beteiligten viel Spaß!

Spriting mit Compass

Allgemein

Ich gehe ganz kurz auf die Basics ein: Spriting ist eine Technik, welche viele kleine Bilder zu einem großem Bild zusammenfasst. Diese Technik spart nicht nur ein paar KB bei der Dateigröße, sondern hat den Vorteil, dass nicht zu viele Verbindungen zum Server aufgebaut werden müssen.

PS: Ich habe darüber bereits vor einiges Zeit im Zusammenhang mit „Webseiten Komprimierung“ geschrieben.

Kommen wir jetzt jedoch zum interessanten Teil. Wie setzt man dies ein, ohne bei jeder kleinen Bildveränderung / Hinzufügung Mehraufwand zu generieren.  Und die Lösung heißt „compass„. Dies ist ein Framework, welches auf Sass aufsetzt und dieses um einige nützliche Features ergänzt.

Installation / Konfiguration

Hier ist ein kleines Bash-Skript, welches in meinen „.dotfiles“ beinhaltet ist und die erforderlichen Programme (ruby, sass, compass, oily_png) installiert.

github.com/voku/dotfiles/blob/master/firstInstall.sh

Es folgt eine Beispiel-Konfiguration für compass, woraus sich bereits die Order für Bilder, Scss, css und js hervorgehen:

github.com/voku/twig-wrapper-example/blob/master/config.rb

 

Beispiel

icons icons_new

URL: moelleken.org/tpl_imageSprites.php

SCSS:

Ich habe die für das Sprite relevanten Zeilen rot gekennzeichnet. Außerdem sollte man erwähnen, dass der Verzeichnis-Name „**/spritesTest/“ sich in der „include“-Anweisung wiederfinden muss. Die Bilder selber lassen sich anschließend über den Dateinamen im CSS referenzieren, so dass man möglichst einfache / eindeutige Dateinamen verwenden sollte.

PS: hier findet du das entsprechende CSS, welches diese paar Zeilen SCSS generieren

// compass
@import "compass/css3";
@import "compass/utilities/sprites";

/*
 *  - - - - - - - - - -
 * some icons for testing
 *  - - - - - - - - - -
 */

@import "../images/spritesTest/*.png";
@include all-spritesTest-sprites;
#spritesOverview span {
  width: 32px;
  height: 32px;
  display: block;
  transition: all 0.2s ease-in;
  &:hover {
    @include transform(scale(1.8));
    transition: all 0.4s ease-out;
  }
}

@for $i from 1 through 20 {
  .step#{$i} {
    animation: movement 1500ms ease (75ms * $i) infinite alternate;
  }
}

@keyframes movement {
  from {
    @include transform(scale(1.0) translateY(0px) rotateX(0deg));
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  to {
    @include transform(scale(1.5) translateY(-25px) rotateX(45deg));
    box-shadow: 0 25px 25px rgba(0,0,0,0.2);
  }
}

 

PHP:

Die paar Zeilen PHP habe ich nur hinzugefügt, da ich keine Lust hatte alle Dateinamen in ein großes Array zu kopieren und diese Datei direkte von der Festplatte auslese.

<?php
use cms\Path;
use cms\twig\TwigWrapper;

require_once 'inc_globals.php';

$fileArray = file_list(Path::getPathDirTheme() . '/images/spritesTest', 'png');

$icons = array();
foreach ($fileArray as $file) {
  $file = str_replace(Path::getPathDirTheme() . '/images/spritesTest/', '', $file);
  $file = str_replace('emblem-', '', $file);
  $file = str_replace('.png', '', $file);

  $icons[] = $file;
}

// DEBUG
//dump($icons);
// #############################################################################
// # TwigWrapper | templating
// #############################################################################
$twigWrapper = new TwigWrapper('tpl_imageSprites.twig');

$iconsArray = array();
for ($i = 1 ; $i <= 20 ; $i++) {
  shuffle($icons);
  $iconsArray[] = $icons;
}

$twigWrapper->assign('iconsArray', $iconsArray);

echo $twigWrapper->render();

 

Twig:

Zum Schluss noch ein paar HTML-Tags im Twig hinzugefügt und schon können wir die Icons bewundern. ;)

{% extends "tpl_base.twig" %}

{% block head_css %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ urlTheme }}/css-min/sprites.css" />
{% endblock %}

{% block content %}
  {{ breadcrumb | raw }}

  <article id="spritesOverview">

    {% for i in 1..20 %}

      <div class="row step{{ loop.index }}">
        {% for icon in iconsArray[i] %}
          {% if loop.index <= 6 %}
            <div class="medium-2 columns"><span class="spritesTest-emblem-{{ icon }}"></span></div>
          {% endif %}
        {% endfor %}
      </div>

    {% endfor %}

  </article>
{% endblock %}

 

Links:

compass-style.org/reference/compass/helpers/sprites/
Compass Tutorials #6 – Sprites In Compass

Web Development mit Linux (Video)

Im folgenden Video zeige ich kurz (~ 5 min.) wie meine Toolchain im Live-Betrieb aussieht, dabei nutze ich unter anderem Sublime Text, PHP, Twig, Grunt, Sass, Compass, LiveReload und ein paar Funktionen aus den „dofiles“ (z.B. phpserver).

 

Wer den Beispiel-Code aus dem Video selber ausprobieren möchte, hier die Zusammenfassung:

sudo apt-get install git

cd ~
git clone https://github.com/voku/dotfiles/
cd dotfiles/
./firstInstall.sh
./bootstrap.sh
cd ~
vim ~/.extra #1

cd ~
mkdir Projects/
git clone https://github.com/voku/twig-wrapper-example/
cd twig-wrapper-example/
npm install
grunt watch

cd ~/Projects/twig-wrapper-example/
phpserver

#1 füge deine persönlichen Git-Einstellungen hier hinzu

 

Wer mehr Infos oder Erklärungen zu den hier verwendeten Tools haben möchte, sollte sich einmal folgende Videos anschauen: suckup.de/howto/html/moderner-build-development-workflow-via-bower-grunt-yeoman/

 

CSS > SCSS > CSS

Neue Webseiten werden heutzutage oft via SASS erstellt, aber was macht man mit alten Projekten? Kann man auch hier SASS einsetzten? – Ja! Das schöne an „SCSS“-Dateien ist das diese 100% mit CSS kompatibel sind, so dass man die entsprechende Dateiendung umbenennen kann und neue / kleine Anpassungen in der SASS-Syntax schreiben kann. Wer jedoch eine ganze CSS-Datei auf den SCSS-Style anpassen möchte kann z.B. den „sass-convert“-Befehl auf der Kommandozeile verwenden.


See the Pen tqJvn by Lars Moelleken (@voku) on CodePen.
1

CSS > SCSS

Mit dem folgendem Befehl kann man die CSS-Datei in eine SCSS-Datei umwandeln lassen.

sass-convert --from css --to scss test.css test.scss


See the Pen Arxuv by Lars Moelleken (@voku) on CodePen.
1

Es folgt eine kleine manuelle Optimierung, dabei gilt: Umso besser die ursprüngliche CSS-Datei aufgebaut war, desto besser kann diese konvertiert werden.


See the Pen eFdlJ by Lars Moelleken (@voku) on CodePen.
1

SCSS > CSS

Nun erstellen wir aus der neuen SCSS-Datei wieder eine CSS-Datei + Sourcemap

scss  --sourcemap --line-comments --style expanded test.scss test_new.css


See the Pen pErjB by Lars Moelleken (@voku) on CodePen.
1

PS: mithilfe der Source Map kann Chrome automatisch die entsprechenden Code-Stellen in der entsprechenden SCSS-Datei  anzeigen :)

 

Links:
http://sassmeister.com/
http://css-tricks.com/sass-style-guide/

Quellen:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style