conference-128x128

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ß!

Konsolen-Logo

ShellShock – Sicherheitsproblem bei der Unix-Shell $(bash)

Alle alten Version der Unix-Shell “bash” enthalten eine kritische Sicherheitslücke (CVE-2014-6271), so dass man Befehle z.B. über CGI-Skripte oder via DHCP ausführen kann.  Ggf. benötigt nun dein Handy (z.B. CyanogenMod), dein Router oder deinen Mac / Linux / BSD und so weiter Software-Updates.

Teste dein System:

env x='() { :;}; echo vulnerable' bash -c "echo this is a test"

vulnerable
this is a test

Nachdem man die aktuellen Updates eingespielt hat (z.B. via aptitude) dann sollte die Ausgabe folgendermaßen aussehen.

env x='() { :;}; echo vulnerable' bash -c "echo this is a test"

bash: warning: x: ignoring function definition attempt bash: error importing function definition for `x’ this is a test

Technische Erklärung:

(http://seclists.org/oss-sec/2014/q3/650)
Das Problem ist, dass das man zwischen unterschiedlichen Bash-Instanzen Variablen und Funktionen teilen kann.

export foo='() { echo "bar" ; }'
bash -c 'foo'

Jede neue Bash-Instanz wird nun beim Start die Funktion “foo”  registrieren, so dass man diese Ausführen kann. Wenn man nun jedoch eine Funktion exportiert, führt die Bash den nächsten Befehl ebenfalls aus, da der String der “() {” nicht korrekt geparst wird. Damit können wir nun Befehle ausführen, indem wir bestimmte Strings (Funktionsdefinitionen) an z.B. ein CGI-Skript übergeben.

Links:

http://www.heise.de/newsticker/meldung/Bash-Luecke-ShellShock-ist-noch-nicht-ausgestanden-2403607.html

http://www.heise.de/newsticker/meldung/ShellShock-Standard-Unix-Shell-Bash-erlaubt-das-Ausfuehren-von-Schadcode-2403305.html

http://ftp.gnu.org/pub/gnu/bash/bash-4.3-patches/bash43-025

 

03-Trello-300x173

Projekte organisieren mit Trello.com

Heute möchte ich ein Web-Tool zur Organisation von Projekten vorstellen: https://trello.com

Trello nutzt “Listen”, welche sich auf sogenannten “Boards” befinden, um verschiedene Kategorien in einem Projekt abzubilden. Diese Listen beinhalten “Cards”, welche wiederum verschiedene Elemente (Checklisten, Bilder, E-Mails, Kommentare, etc.) enthalten können. Dabei empfehle ich das Tool einfach mal auszuprobieren, bevor man sich diesen und weitere Texte durchliest.

Live-Beispiel:  suckup.de

https://trello.com/b/SgOH9gbE/it-blog-suckup-de

Als Live-Beispiel möchte ich meinen Blog nutzen. Ich versuche meine Blog-Posts nun via Trello & Google-Docs zu organisieren. Dazu habe ich einige Kategorien (Blog-Ideen, Blog-Query, Blog-Artikel und Done) angelegt und bereits einige Themen-Vorschläge eingefügt.

trello

Weitere Überlegungen

Momentan überlege ich, wie man dieses grandiose Tool auch in der täglichen Arbeit einsetzten kann. Dazu würde ich zunächst (ganz noch Projektgröße) verschiedene Trello-Boards anlegen. Dabei kann man “Boards” auch in bestimmten “Organisations” anlegen, was ggf. eine bessere Übersichtlichkeit liefert.

Unbenannt-4

z.B. einige fiktive Organisation für meine private Webseite: http://moelleken.org

– “Planung”
– “Development”
– “Bugs”
– (“Refactoring”)
– (“Roadmap”)

Unbenannt-2

Dabei können die verschiedenen Tasks zur nächsten Projektphase weitergereicht werden.

Planung: erste Ideen
Trello_planung

Planung: konkrete Beschreibungen und Vorstellungen (hier sollten nach externe Dokumente / Bilder etc zur Beschreibung beigefügt werden)
Trello_planung2

Development: Bugs, Refactoring-Maßnahmen und neue Features können z.B. in einem Team Meeting in diese Kategorie verschoben und Priorisiert werden.
Trello_dev

Development: jeder im Team kann sehen, wer welches Feature, Bug etc. bearbeitet (dies Übersicht kann man mit farblichen “Labels” noch verbessern)
Trello_dev2

Am Ende der Woche kann man ein Fazit ziehen und ggf. im Team vorstellen, welche Tasks umgesetzt wurden, dies förder die Motivation, bringt Strukturen in das Projekt und verteilt das Wissen nebenbei noch auf verschiedene Mitarbeitet.

Fazit

Noch kann ich nicht sagen, ob diese Überlegungen auch im täglichen “Doing” einsetzbar oder von Vorteil sind. Daher folgt in den nächsten Tagen / Wochen ein weitere Blog-Post, welcher soeben unter “https://trello.com/b/SgOH9gbE/it-blog-suckup-de” geplant wird. ;)

Links

Trello: Projektmanagement leicht gemacht
Productivity-Tools: Projekte organisieren mit Trello.com

icons

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

debian-logo

V-Server Problem bei Strato

Mein Virtueller Server von Strato hat diese Woche erhebliche Probleme. Angefangen hat dies bereites letzte Woche, daher habe ich am 22.06.2014 eine Support-Anfrage mit der Bitte um Prüfung geschrieben, jedoch bisher nur die Antwort erhalten, dass ein überlastetet Hostsystem ggf. zu den Problemen führt und dass dies momentan geprüft wird.

– Server-“Load”: > 10
– CPU-Auslastung : ~ 0%
– I/O-Auslastung: ~ 0%

——————————————

Reaktionszeit: 1/2 Min. für den SSH-Login  :-(

Daher kann es zwischenzeitlich auf dieser Webseite noch zu erheblichen Ladezeiten kommen, ich bitte dies zu entschuldigen. Wenn jemand einen guten Tipp für einen neuen Hoster hat oder andere Schlüsse aus den folgenden Screenshots ziehen kann, schreibt mir dies bitte per E-Mail “lars (at) moelleken.org” oder einfach direkt hier als Kommentar, vielen dank! Mfg Lars

 

server_vmstat

server_iotop

server_top

 

Falls jemand ebenfalls Performance-Probleme mit seinem Linux-Server hat, sollte man sich einmal folgenden aktualisierten Blog-Post anschauen:

-> Server-Analyse: http://suckup.de/linux/linux-server-analysieren/

 

UPDATE: 02.07.2014 15:59

Sehr geehrter Herr Moelleken,

ich möchte Sie mit dieser E-Mail über den Bearbeitungsstand Ihres Troubleticket informieren.

Sie hatten von Beeinträchtigungen bezüglich der Performance Ihres STRATO Virtual Server Linux berichtet.
Vorab bitte ich die Ihnen dadurch entstandenen Unannehmlichkeiten zu entschuldigen.

Erfreulicherweise kann ich Ihnen nun mitteilen, dass die Einschränkungen an Ihrem Server mittlerweile vollständig behoben wurden. Ihr Server ist damit wieder in vollständigem Umfang und mit gewohnter Performance zu erreichen.

Ich wünsche Ihnen weiterhin viel Erfolg mit Ihrem STRATO Server und stehe auch weiterhin bei Rückfragen für Sie bereit.

 

AngularJS

Multi-Platform Mobile Apps via Ionic

Ionic ist ein Frontend-Framework, mit welchem man via HTML5 / JavaScript und CSS native Apps bauen kann. Diese Apps können via “Apache Cordova” auf native Funktionen (Kamera, GPS, etc.) der Geräte zugreifen. Zudem wird Google’s JavaScript Framework “AnguarJS” genutzt und natürlich wird auch “SASS” unterstützt.

Vorbereitung

Man kann Multi-Platform Mobile Apps sowohl unter Windows, Linux oder Mac OS X entwickeln, jedoch ist die Vorbereitung unter Linux / Mac OS X um einiges einfacher.

Ich empfehle an dieser Stelle mal wieder die “.dotfiles” zu installieren.

cd ~ 
git clone https://github.com/voku/dotfiles.git 
cd dotfiles 
source bootstrap.sh

# Standard- & Webworker-Tools installieren

~/dotfiles/firstInstall.sh

Bei der Frage nach den “webworker tools”,  muss diese mit “y” beantwortet werden.

# Android SDK installieren

sudo ~/dotfiles/android_sdk_install.sh

# Java installieren

sudo add-apt-repository -y ppa:webupd8team/java
sudo aptitude update
sudo aptitude install oracle-java7-installer

# Ant installieren

sudo apt-get install ant

 

Nachdem die Installation komplett abgeschlossen ist, muss die “~/.extra”-Datei angepasst werden.

z.B.:

#!/bin/bash                                                                                                                                                                                                       

DEFAULT_USER="lars"
GIT_AUTHOR_NAME="Lars Moelleken"
GIT_COMMITTER_NAME="$GIT_AUTHOR_NAME"
git config --global user.name "$GIT_AUTHOR_NAME"
GIT_AUTHOR_EMAIL="lars@moelleken.org"
GIT_COMMITTER_EMAIL="$GIT_AUTHOR_EMAIL"
git config --global user.email "$GIT_AUTHOR_EMAIL"
git config --global push.default simple

# java - example
export JAVA_HOME=/usr/lib/jvm/java-7-oracle
export JDK_HOME=$JAVA_HOME
export JRE_HOME=$JAVA_HOME
export PATH=$JAVA_HOME/bin:$PATH

# android - example
export ANDROID_SDK_ROOT=/usr/local/android-sdk/
#export ANDROID_NDK=/usr/local/android-ndk/
export ANDROID_HOME=$ANDROID_SDK_ROOT
export PATH=$ANDROID_SDK_ROOT/tools/:$ANDROID_SDK_ROOT/platform-tools/:$ANDROID_SDK_ROOT/build-tools/19.1.0/:$PATH

 

PS: bei Debian (sid) musste ich noch ein wenig nachhelfen, so dass die Android-SDK auch korrekt funktioniert:

sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt-get install lib32z1 lib32stdc++6

 

Beispiel-App für Android erstellen

ionic start planet-ubuntuusers
cd planet-ubuntuusers
rm -rf www/
git clone https://github.com/voku/planet-ubuntuusers-app www
ionic platform android
ionic build android

Man kann die App nun im Browser (ionic serve), im Android Emulator (ionic emulate android) oder direkt auf seinem Android-Gerät (ionic run android) ausprobieren!!!

 

Links

Es folgen ein paar Links zur App / API / Dokumentation  und zum Beispiel-Quellcode

ANDOIRD APP-DOWNLOAD:
 http://suckup.de/planet-ubuntuusers-json/PlanetApp-debug.apk

QUELLCODE ZUR APP:
https://github.com/voku/planet-ubuntuusers-app

SCREENSHOT:
Planet App

JSON-API: 
http://suckup.de/planet-ubuntuusers-json/json.php

HTML-OUTPUT VIA TWIG:
http://suckup.de/planet-ubuntuusers-json/

QUELLCODE ZUR API:
https://github.com/voku/planet-ubuntuusers-json (in zirka 2 Minuten geschrieben & deployed -> composer is great!!!)

 

DOKUMENTATION:
https://docs.angularjs.org/
http://ionicframework.com/docs/
http://cordova.apache.org/

Konsolen-Logo

Kurztipp: lokalen offenen Port finden (bash)

Habe soeben folgende Funktionen zu meinen dotfiles hinzugefügt, um einen freien lokalen Port zu finden. Diese werden wiederum verwendet, um z.B. die “phpserver“-Funktion auszuführen.

# -------------------------------------------------------------------
# netstat_used_local_ports: get used tcp-ports
netstat_used_local_ports()
{
  netstat -atn | awk '{printf "%s\n%s\n", $4, $4}' | grep -oE '[0-9]*$' | sort -n | uniq
}

# -------------------------------------------------------------------
# netstat_free_local_port: get one free tcp-port
netstat_free_local_port()
{
  read lowerPort upperPort < /proc/sys/net/ipv4/ip_local_port_range
 
  # create a local array of used ports 
  local all_used_ports=($(netstat_used_local_ports))

  for port in $(seq $lowerPort $upperPort); do
    for used_port in "${all_used_ports[@]}"; do
      if [ $used_port -eq $port ]; then
        continue
      else
        echo $port
        return 0
      fi
    done
  done 
}

 

grunt

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/

 

Sublime_Text_Logo

Sublime Text 3 – Ubuntu / Debian

Man kann über proprietäre Software denken was man will aber wenn Software wirklich gut ist und einem die Arbeit erleichtert / beschleunigt solle man sich diese zumindest einmal anschauen.

Installation

Es gibt unterschiedliche Wege Sublime Text zu installieren. Man kann das Paket direkt von der entsprechenden Webseite laden und mit folgendem Befehl installieren.

wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3059_amd64.deb
sudo dpkg -i sublime-text_build-3059_amd64.deb

Info: dev-builds gibt es hier Oder man verwendet z.B. das Linux Mint Repository und installiert Sublime über den Paketmanager.

sudo echo "deb http://packages.linuxmint.com/ debian main import backport upstream romeo" >> /etc/apt/sources.list
sudo apt-get update
sudo apt-get install sublime-text

 

Plugin-Manager hinzufügen

Auf der folgenden Webseite gibt es “den” Plugin-Manager für Sublime, welchen man auf jeden Fall installieren sollte: sublime.wbond.net/installation

mkdir ~/.config/sublime-text-3/Packages/Installed\ Packages
cd ~/.config/sublime-text-3/Packages/Installed\ Packages
wget https://sublime.wbond.net/Package%20Control.sublime-package

Nachdem man Sublime einmal neugestartet hat, findet man unter “Preferences -> Package Control” alle Befehle zum verwalten von Plugins.

 

Plugin Empfehlungen

– BracketHighlighter -> Bracket and tag highlighter for Sublime Text

– DocBlockr -> Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++

Emmet -> Emmet (ex-Zen Coding) for Sublime Text

PHP-Twig -> A TextMate (and Sublime Text) bundle for Twig.

Sass -> Sass support for TextMate & Sublime Text 2

Git -> Plugin for some git integration into sublime text

– GitGutter -> A Sublime Text 2/3 plugin to see git diff in gutter

 

Links:

Sublime Text – Tips-Tricks-Shortcuts

– Best of Sublime Text 3 Features. Plugins and Settings

– Sublime Text – Keyboard-Shortcuts

– www.sublimetext.com/docs/3/

twig-logo

Twig – PHP

Als erstes möchte ich hier klären was “Twig” ist und wie man diese PHP-Bibliothek verwendet.

Was ist Twig?

Twig ist eine Open Source Template-Engine für PHP und wird z.B. von Symfony verwendet. Damit ist es möglich die Programmierung vom Layout zu trennen und Projekte somit übersichtlicher und sicherer zu erstellen. Zudem kann man Twig relativ einfach erweitern und neue Funktionen oder Filter hinzufügen. Außerdem ist die Dokumentation wirklich gut und die Einarbeitungszeit ist sehr kurz.

 

Schnelle Installation

Damit man einen schnellen Einstig in Twig bekommt, habe ich eine kleine Wrapper-Klasse geschrieben und in einem zweiten Projekt “Twitter Bootstrap” als Twig-Beispiel -Template integriert.

git clone https://github.com/voku/twig-wrapper-example/

Das Projekte ist mit Gunt + SASS + Bower + Composer etc. aufgesetzt, jedoch habe ich alle Vendor-Dateien mit in dem Repository eingecheckt, so dass man keine komplette Toolchain benötigt um die folgenden Beispiele auszuprobieren.

PS: um das Projekt zu updaten bzw. weiterzuentwickeln kann man folgende Befehle ausführen:

cd twig-wrapper-example/
rm -rf vendor/
rm composer.lock
npm install
bower install
composer install
grunt build
grunt watch

 

Syntax

Die Allgemeine-Syntax lässt sich in “output”, “function” und “comment” unterteilen.

output” ->  {{ … }}  -> um Variablen in das Template einzufügen

function” -> {% … %} -> um Funktionen auszuführen

comment” -> {# … #} -> um einen Kommentar einzufügen, welche nur im Twig sichbar ist (nicht im späterem “html”-output)

Variablen

Man kann sowohl Arrays, einfache Variablen oder ganze Objekte an Twig übergeben.

z.B.:

$object = new Object();
$twig->assign('object', $object);
$array = array(1,2,3,4,5);
$twig->assign('array', $array);
$string = 'test';
$twig->assign('string', $string);

Zudem kann man auch Variablen in einem Twig-Template definieren:

{% set totalimages = 4 %}

Filter

Auf der Kommandozeile ist man bereits an Pipes ( “|” ) gewöhnt und kann dies nun auch bei der Entwicklung nutzen. :)

{% set totalimages = object.images | length %}
{{ array[1] | striptags | raw }}

Kontrollstrukturen

“if”-Bedingungen werden wie folgt geschrieben:

{% if (name == "foo") or (name == "bar") %}
    {{ name }}!!!
{% elseif name == "test" %}
    {{ name }} -> was a test
{% else %}
    {{ name }}
{% endif %}

“loops” in Twig: for

{% for asset in headerObject %}
  <img src="{{ asset.url }}">
  <p>{{ asset.caption }}</p>
  {% if loop.index0 is divisibleby(2) %}
    <hr />
  {% endif %}
{% endfor %}

PS: außerdem kann man wie im vorherigen Beispiel – “loop” nutzen, um den Anzahl von aktuellen Durchläufe zu analysieren

 

extends

Eine Hauptfunktionalität ist die Twig-Funktion “extends“. Mit dieser Funktion kann man sein Template erweitern und zuvor definierte Bereiche (block – endblock) wiederum ersetzten.

{%extends “base.twig” %}

base.twig -> index.twig

Der vorherige Befehl bewirkt in der “index.twig” Datei, dass das angegebene Template erweitert wird. Dabei ist es sehr hilfreich möglichst viel HTML-Code in einem Basis-Twig unterzubringen. Anders wie bei vielen anderen PHP-Projekten sollte man nicht so oft via “include” inkludieren, sondern bestimmte Bereiche (blocks) im “base.twig” festlegen und diese mit Inhalten befüllen, erweitern oder leeren.

 

include

Die Funktionalität “include” lässt sich einsetzten um Template-Komponenten (z.B.: einen Slider) an mehreren Stellen einzufügen. Man hat die Möglichkeit beim “include”-Aufruf Variablen zu übergeben, jedoch kann man keine “blocks” von bereits inkludierten Templates mehr ändern.

{% include “inc_carousel.twig” %}

base.twig -> inc_carousel.twig

 

embed

Beim “embed” handelt es sich um eine Mischung aus extending & including, so kann man innerhalb des embed-Aufrufes darin befindliche “blocks” ersetzten.

{% embed “content_sidebar.twig” %}

index.twig -> content_sidebar.twig

 

Twig_Extension

Wem ein bestimmter Filter oder Funktion fehlt, kann dies sehr einfach in Twig  integrieren z.B. -> PluginHtml.php

$twig->addExtension(new PluginHtml());

 

Links

http://knpuniversity.com/screencast/twig/basics | Basics – Video
http://twig.sensiolabs.org/ | Dokumentation

Second Universal Cybernetic-Kinetic Ultra-Micro Programmer