Webdesign und TYPO3 Blog aus Duisburg http://www.rogoit.de/webdesign-typo3-blog-duisburg Neuigkeiten rund um das Thema Webdesign Wed, 19 Apr 2017 20:23:29 +0000 de-DE hourly 1 https://wordpress.org/?v=4.9.3 Pair Programming Tipps und Studien http://www.rogoit.de/webdesign-typo3-blog-duisburg/pair-programming-tipps-und-studien/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/pair-programming-tipps-und-studien/#respond Wed, 19 Apr 2017 20:23:29 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=5223 Pair Programming ist sehr gut für das eigene Team und die Software-Qualität. Leider gibt es viele Vorbehalte gegenüber dieser tollen Art zu arbeiten. Das ist sehr schade. Seit einigen Jahren bin ich ja auf Konferenzen und User-Groups mit der Funk-Tastatur unterwegs und habe ja auch bei den Never Code Alone Events #ncaevents ausschließlich Pair-Programming im [...]

Der TYPO3 Webdesign Blog Pair Programming Tipps und Studien erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Pair Programming ist sehr gut für das eigene Team und die Software-Qualität. Leider gibt es viele Vorbehalte gegenüber dieser tollen Art zu arbeiten. Das ist sehr schade. Seit einigen Jahren bin ich ja auf Konferenzen und User-Groups mit der Funk-Tastatur unterwegs und habe ja auch bei den Never Code Alone Events #ncaevents ausschließlich Pair-Programming im Fokus. Hier gebe ich euch ein paar gute Tipps für den reibungslosen Ablauf.

Driver Navigator / Fuck it

Pair Programming Wikipedia

Pair Programming Wikipedia

Sucht man in staubigen Sachbüchern oder bei Wikipedia nach Pair-Programming so kommt man ganz schnell zum Driver-Navigator-Spiel. Hier soll die Person – ganz Gender neutral 😉 – an der Tastatur nur tippen und der Navigator praktisch die Richtung vorgeben. Das mag ja pädagogisch wertvoll sein, aber wer steht schon auf Pädagogik. Schnappt euch bitte jeder eine Tastatur und arbeitet gemeinsam und zusammen. Alles andere führt nur zu völlig unnötigen Frust. Pair Programming ist kein Selbtsläufer und muß auch geübt werden. Dabei ist auch viel Geduld und natürlich Respekt gefragt. Es geht nicht um richtig und falsch, sondern um eine gemeinsame Sprache und Lösung.

Bekannte Pitfails die ihr vermeiden solltet

  • Beide Webdeveloper müssen sich mit dem aktuellen task auskennen, damit es nach vorne geht. Sonst ist es nur ein Know-How Transfer. Der ist zwar auch wichtig, aber so dann doch sehr ineffizient und kostenintensiv
  • Pair-Programming ist kostenintensiv. Deshalb zieht in der Zeit dran und gebt Gas. Ihr werdet so oder so nicht den doppelten Output haben. Aber natürlich ist das Ergebnis klarer und weniger Bug anfällig. Bleibt aber nicht in Schönheit oder Prinzipien und Diskussionen hängen. Liefert gute Arbeit ab.
  • Redet miteinander. Natürlich auch der Driver. Tauscht euch aus, plat gemeinsam den nächsten kleinen Schritt und setzt ihn gemeinsam um. Das muß auch gelernt werden. Macht die Schritte nicht zu groß und wechselt auch häufig ab.
  • Pair-Programming klappt nur mit Leuten, die sich grün miteinander sind und im wahrsten Sinne des auch riechen können. Leider gibt es hier immer wieder vielleicht unangenehme Situationen. Tut auch selbst einen gefallen und geht da mit frischen Klamotten hin und Zähneputzen und Kaugummi ist auch ok. Macht gerne auch mal das Fenster auf 😉

Quellen zu Pair-Programming

In der Software-Entwicklung ist Pair-Programming kein neues Topic. Allerdings ist es gerade im Bereich Webdeveloping viele Jahre verloren gegangen. Neben Uncle Bob Martin Fowler und dem Xtreme-Programming gibt es natürlich noch zahllose andere Namen. Fred Brooks, John Von Neummann, Richard Gabriel, Jerry Weinberg or Edsger Dijkstra sollen hier mal nur einige sein. Und natürlich findet das Thema in der Agilen Transformation auch eine immer größere Aufmerksamkeit.

  • 1992 – Das dynamische Duo – Larry Constantine Berichtet über Pair Programming bei der Whitesmith Inc. Hier haben schon damals 2 Programmierer mit einer Tastatur gemeinsam gearbeitet. Man sprach in diesem Zusammenhang von einem Schulterblick.
  • 1993 – Die Studie “The benefits of collaboration for student programmers” von Wilson befasst sich schon früh mit den Vorteilen von Pair-Programming. Allerdings ging es mehr um den Nachweis, daß es überhaupt funktioniert.
  • 1995 – In dem Buch “Pattern Languages of Program Design” gibt es ein Kapitel von Jim Coplien „A Generative Development-Process Pattern Language“. Es befasst sich ebenfalls mit Pair-Programming.
  • 1998 – Einer der ersten Artikel zum Thema Extreme Programming taucht auf. In “Chrysler goes to Extremes” wird Pair Programming als eine der wichtigsten Methoden vom C3 team hervorgehoben. Kurze Zeit später wird Pair-Programming zu einer der 12 XP Methoden.
  • 2000 – Die Regeln für das Pair-Programming als Driver und Navigator werden festgehalten und als Einstieg in Pair-Programming empfohlen. Hierzu gab es ein Mailing-List-Posting. Wie schon erwähnt sind diese Regeln in der Praxis nur bedingt anwendbar. Hilfreich ist an dieser Stelle auch ein Artikel von Sallyann Bryant „Pair programming and the mysterious role of the navigator„.
  • 2002 – Laurie Williams und Robert Kessler verfassen ihr erstes Buch mit dem Titel “Pair Programming Illuminated”. Es beinhaltet zahlreiche praktische Beispiele und schöne Diskussionen zu dem Thema.
  • 2003 – ein anonymer Artikel im C2 Wiki mit dem Titel Ping-Pong-Pair-programming taucht auf. Er verbindet Pair-Programming mit Test-Driven-Development. Die Software-Kammer hat hier auch öfters Veranstaltungen zu dem Thema.

Webdeveloper Skills

Wie anfangs erwähnt ist es wichtig vom Know-How her gleiche Leute in einem für beide Beteiligten aktuellen Thema zusammen zu setzen. Gerade, wenn man mit Test-Driven-Development in der Ping-Pong-Variante arbeiten möchte ist es wichtig hier nicht zu weit auseinander zu sein. Sollten die Skills aber weiter auseinander sein, oder man auch in größeren Gruppen gemeinsam coden, dann kann man hier auch ein wenig die Rollen gezielt verteilen.

  • Anfänger
    • Für besseres Selbstvertrauen und einen guten Lerneffekt bietet sich hier die Rolle als Driver an.
    • Als Driver soll er aber ruhig Fragen stellen dürfen und weiter gebracht werden
  • Fortgeschrittener
    • Kann jederzeit die Tastatur übernehmen und seine eigene Rolle einfach tauschen.
  • Profi
    • Kann die Moderation übernehmen und das ganze Pair-Programming in seiner Session führen. Damit wird das Ziel nicht verloren und sich nicht in Details verloren.

Voraussetzungen Pair-Programming

  • Ein separater heller und abgegrenzter Raum in dem man ungestört bei geschlossener Türe arbeiten kann
  • Ein großer Monitor. Zu zweit an einem Rechner ist es zu klein. Beamer müssen hochauflösend und gut lesbar sein.
  • Die IDEs sollten mit hellen Themes betrieben werden. Das sieht man deutlich besser und ist wesentlich lesbarer.

Erwartete Resultate

  • Verbesserte Code-Qualität durch höhere Lesbarkeit
  • Know-How Transfer unter den Mitarbeitern und schnellere Einarbeitung und effektivere Arbeitsweise im gesamten Projekt
  • Webdeveloper können sich besser gegenseitig vertreten und Tasks übernehmen im Falle von Krankheit, Urlaub etc.
  • Erhöhte Skills und Motivation durch eine verbesserte gemeinsame Arbeitsweise und dem hohen Know-How Transfer in beide Richtungen
  • Effektivere Absprachen und kürzere Informationswege unter den Webdevelopern
  • Weniger Unterbrechungen von Entwicklungsprozessen, da man zu zweit natürlich weniger nebenher macht

Potentielle Kosten

Ein reiner Blick auf die Kosten darf beim Pair-Programming leider nicht die entscheidende Rolle spielen. Man geht insgesamt von 15% Mehrkosten aus. Allerdings ist das ein reiner Blickwinkel auf die Abarbeitung von Tickets. Und dafür ist der Wert ja weit von 200% entfernt. Weniger Bugs, eine höhere Motivation der Mitarbeiter und eine viel höhere Zuverlässigkeit ist sicherlich viel mehr wert.

Akademische Publikationen

Der TYPO3 Webdesign Blog Pair Programming Tipps und Studien erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/pair-programming-tipps-und-studien/feed/ 0
Codeception Test einzelnen ausführen http://www.rogoit.de/webdesign-typo3-blog-duisburg/codeception-test-einzelnen-ausfuehren/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/codeception-test-einzelnen-ausfuehren/#respond Sat, 25 Feb 2017 13:12:55 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=5151 Gerade beim der Ebtwicklung von einem Codeception Test ist es wichtig Codeception Tests auch mal einzeln auszuführen. Tests sind ja immer auch thematisch gruppiert. Dafür sollte man auch immer mit Cest- und nicht mit Cept-Files arbeiten. Da die PHP-Webdevelopern generell auch mehr Möglichkeiten bieten sind die Cest-Files auch in meinen Projekten fest etabliert. Betrachten wir [...]

Der TYPO3 Webdesign Blog Codeception Test einzelnen ausführen erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Gerade beim der Ebtwicklung von einem Codeception Test ist es wichtig Codeception Tests auch mal einzeln auszuführen.

Codeception Test Single

Codeception Test Single

Tests sind ja immer auch thematisch gruppiert. Dafür sollte man auch immer mit Cest- und nicht mit Cept-Files arbeiten. Da die PHP-Webdevelopern generell auch mehr Möglichkeiten bieten sind die Cest-Files auch in meinen Projekten fest etabliert. Betrachten wir einmal aus meinem Silex Codeception Repository den NavigationCest.

<?php
use Step\Acceptance\Acceptance;
use \Codeception\Scenario;

class navigationCest
{
    ...

    public function checkLinksToAnchor(Acceptance $I, \Page\Startpage $startpage)
    {
        $links = $I->grabMultiple($startpage::$navigationLink, 'href');
        foreach ($links as $link) {
            $I->assertContains('#', $link, 'Link contains #: ' . $link);
        }
    }

    ...


    }
}

Einzelnen Codeception Test ausführen

In den Cest-Szenario werden verschiedenen Tests für die Navigation ausgeführt. Jetzt ist es natürlich möglich, daß nur einer failed. Jetzt möchte man natürlich nicht immer alle anderen ebenfalls ausführen und den Bug schnell fixen.

php vendor/bin/codecept run acceptance navigationCest.php: checkLinksToAnchor

So kann man nur einen bestimmten Codeception Test ausführen.

PHP-Kurs Inhouse-Schulung Codeception

Ab sofort können auch verschiedene PHP-Kurs Inhouse-Schulungen über mich gebucht werden. Hier ist auch Codeception ein Thema.

Automatisierte Tests mit Codeception für effektive Entwicklung

Je eher ein Bug gefunden wird desto günstiger ist es diesen zu beheben. Mit Codeception Acceptance Tests kontrolliert man dabei nicht nur das Backend, sondern die gesamte Applikation als fertiges Produkt. Javascript, CSS, Vendor libraries im Zusammenspiel und auch fertig komprimiert. Navigationen, Tooltips, Formulare, Mouse Overs und auch Lightboxen. Klappt hier alles zuverlässig. Und wer hat schon Lust das auf 3 Browsern mit 2 Auflösungen zu testen. Codeception 😉

Kostenlose Webdevelopment Workshops – Never Code Alone

Seit letzten Jahr richten wir auch alle 3 Monate einen kostenlosen Webdevelopment Workshop aus und versuchen so, die Software-Qualität als Initiative zu fördern. Dabei ist es uns wichtig professionelle Schulungen kostenlos zugänglich zu machen. Neben den Schulungen bieten wir auch die Möglichkeit Gastbeiträge zu veröffentlichen. Diese werden zusätzlich von einem professionellen Redakteur korrigiert und in Absprache mit euch veröffentlicht.

Der TYPO3 Webdesign Blog Codeception Test einzelnen ausführen erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/codeception-test-einzelnen-ausfuehren/feed/ 0
Twig key underscore Unterstrich dash Template attribute-Methode http://www.rogoit.de/webdesign-typo3-blog-duisburg/twig-key-underscore-unterstrich-dash-template-attribute-methode/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/twig-key-underscore-unterstrich-dash-template-attribute-methode/#respond Tue, 31 Jan 2017 12:59:26 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=5109 Ein Twig key underscore und gerade die Kombination aus Minus und Underscore können im Twig-Template nicht direkt angesprochen werden. Ist dann noch der Strict Mode gesetzt wird eine Exception „Array to string conversion“ geworfen. Allerdings ist es auch ohne den strict_variables ärgerlich. Man kommt nicht an den Value im Template und dann stimmt die Ausgabe nicht. Die Lösung ist [...]

Der TYPO3 Webdesign Blog Twig key underscore Unterstrich dash Template attribute-Methode erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Ein Twig key underscore und gerade die Kombination aus Minus und Underscore können im Twig-Template nicht direkt angesprochen werden. Ist dann noch der Strict Mode gesetzt wird eine Exception „Array to string conversion“ geworfen. Allerdings ist es auch ohne den strict_variables ärgerlich. Man kommt nicht an den Value im Template und dann stimmt die Ausgabe nicht. Die Lösung ist hier der Zugriff über die attribute-Methode.

Twig key underscore „Array to string conversion“ mit attribute-Methode

Twig Key Underscore

Twig Key Underscore

Leider hat man nicht immer Einfluß auf die Datenquelle. Gerade wenn man mit importierten Daten aus einem anderen System arbeitet. Bei einem Silex Projekt mit einem CSV-Import für Elasticsearch ist mir dieser Fehler untergekommen. Hier gibt es jetzt die einfache Lösung:

{{ attribute(object, method) }}

{{ attribute(object, method, arguments) }} {{ attribute(array, item) }}

Weitere Anwendungsfälle sind hier auch dynamische Keys.

Twig-Template isset mit defined

Grundsätzlich kann man in Twig auch die Existenz einer Variablen prüfen, bevor man auf diese zugreift.

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

Das ist allerdings keine effektive Art der Entwicklung. Hier wird gerade der Template Code stark aufgebläht. Von daher sollte man einfach im Live-Betrieb über die Environment-Variable den Strict-Mode ausschalten. Während der Entwicklung hingegen macht er durchaus Sinn. Aber ein robustes Template schützt nur eine Legacy-Applikation. Das ist der falsche Entwicklungsweg. Einen Wrapper für Keys, die im Template verwendet werden, ist ebenfalls der falsche Weg. Nach Möglichkeit ist hier ganz oben an der Datenquelle und der Ursache der Fix vorzunehmen.

Silex Twig-Templating

Das Micro-Framework Silex eignet sich hervorragend für die schnelle Implementation von Marketing Landingpages. Das Webdesign von PHP-Kurs Inhosue-Schulung basiert darauf. Das entsprechende GitHub-Repo ist hier zu finden.

Der TYPO3 Webdesign Blog Twig key underscore Unterstrich dash Template attribute-Methode erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/twig-key-underscore-unterstrich-dash-template-attribute-methode/feed/ 0
MAC localhost kill Prozess Port 8080 8000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/mac-localhost-kill-prozess-port-8080-8000/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/mac-localhost-kill-prozess-port-8080-8000/#respond Tue, 24 Jan 2017 13:23:18 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=5093 Beim Webdevelopment lokal auf dem MAC nutzt man gerne einen Prozess Port 8080 oder 8000. Bekannte Beispiele sind hier z.B. Symfony, TYPO3, WordPress oder auch Silex. Alle Technolgien sind mir sehr vertraut und bei mir im täglichen Einsatz. Hier kann es allerdings sein, daß ich den Prozess nicht richtig beende und den Tab bei oh-my-zsh schon [...]

Der TYPO3 Webdesign Blog MAC localhost kill Prozess Port 8080 8000 erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Beim Webdevelopment lokal auf dem MAC nutzt man gerne einen Prozess Port 8080 oder 8000. Bekannte Beispiele sind hier z.B. Symfony, TYPO3, WordPress oder auch Silex. Alle Technolgien sind mir sehr vertraut und bei mir im täglichen Einsatz. Hier kann es allerdings sein, daß ich den Prozess nicht richtig beende und den Tab bei oh-my-zsh schon vorher schließe. Dann läuft der Prozess im Hintergrund weiter und blockiert einen Start bei einem anderen Projekt.

Command Line MAC localhost kill Prozess Port 8080

Vorab es macht auf jeden Fall Sinn hier mit oh-my-zsh zu arbeiten, damit man die Autovervollständigung auf der CLI Command Line nutzen kann. Zuerst suchen wir alle Prozesse die auf Port 8080 laufen.

MAC finde alle Prozesse auf Port 8080

lsof -i tcp:8080

Jetzt wird der entsprechende Prozess gelistet. Hier wird u.a. eine UID. Dann einfach ein kill command ausführen.

kill -9 <PID>

MAC Kill Prozess 8080 localhost

MAC Kill Prozess 8080 localhost

 

Der TYPO3 Webdesign Blog MAC localhost kill Prozess Port 8080 8000 erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/mac-localhost-kill-prozess-port-8080-8000/feed/ 0
Caps Lock Shift Taste Escape statt Delete Key macOS Sierra http://www.rogoit.de/webdesign-typo3-blog-duisburg/caps-lock-shift-taste-escape-statt-delete-key-macos-sierra/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/caps-lock-shift-taste-escape-statt-delete-key-macos-sierra/#respond Tue, 03 Jan 2017 13:50:07 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=5049 Für effektives Arbeiten an Keyboards ist es wichtig die Shift Taste Escape (Caps Lock) zu belegen. So hat man die größte Taste auf der Baseline mit einer wichtigen Funktion belegt. Da ich selber recht viel mit VIM arbeite und die Escape-Taste auch sonst recht häufig brauche habe ich diese auf die Caps Lock gelegt. Einige Webdeveloper [...]

Der TYPO3 Webdesign Blog Caps Lock Shift Taste Escape statt Delete Key macOS Sierra erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Für effektives Arbeiten an Keyboards ist es wichtig die Shift Taste Escape (Caps Lock) zu belegen. So hat man die größte Taste auf der Baseline mit einer wichtigen Funktion belegt. Da ich selber recht viel mit VIM arbeite und die Escape-Taste auch sonst recht häufig brauche habe ich diese auf die Caps Lock gelegt. Einige Webdeveloper nutzen hier allerdings auch die Delete-Taste. Das ist vielleicht auch ein sehr guter Usecase. Da schlägt bei mir allerdings die Macht der Gewohnheit zu.

Die Caps Lock oder Shift Taste mit Escape statt Delete Key in macOS Sierra

Caps Lock Shift Taste Escape statt Delete Key macOS Sierra

Caps Lock Shift Taste Escape statt Delete Key macOS Sierra

Leider gibt es eine Änderung bei der neuen Version von Apples Betriebssystem macOS Sierra gegenüber vorherigen Versionen. Hier hatte ich bereits über das Setting mit der Software Seil gebloggt. Das fällt ab sofort flach und geht dafür allerdings gefühlt auch ein wenig einfacher. Man ruft einfach folgendes auf

Systemeinstellungen
Tastatur
Sondertasten
Shift Taste
Escape auswählen

Caps Lock Shift Taste Escape statt Delete Key macOS Sierra

Caps Lock Shift Taste Escape statt Delete Key macOS Sierra

Leider muß man das sowohl für die normale Tastatur, als auch für die Magic Keypad Settings einrichten. Das ist zwar recht seltsam, aber nicht die Hölle 🙂

Der TYPO3 Webdesign Blog Caps Lock Shift Taste Escape statt Delete Key macOS Sierra erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/caps-lock-shift-taste-escape-statt-delete-key-macos-sierra/feed/ 0
Gulp run sequence – Gulp Task sequentiell abarbeiten http://www.rogoit.de/webdesign-typo3-blog-duisburg/gulp-run-sequence-gulp-task-sequentiell-abarbeiten/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/gulp-run-sequence-gulp-task-sequentiell-abarbeiten/#comments Thu, 24 Nov 2016 11:41:46 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=4966 Frontend-Webdevelopment mit Gulp Task sequentiell abarbeiten ist bei modernen Webdesign nötig. Dabei sind Gulp-Tasks ein wichtiger Bestandteil dieser tollen neuen Technologie. Gulp ist eine NodeJS Applikation, die natürlich auch in der Prozessverarbeitung ihre großen Vorzüge bezüglich der Performance hat. Asynchrone Prozessverarbeitung. Damit tun sich traditionelle Webdeveloper, gerade aus der PHP-Welt recht schwer. Hier findet man sich [...]

Der TYPO3 Webdesign Blog Gulp run sequence – Gulp Task sequentiell abarbeiten erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Frontend-Webdevelopment mit Gulp Task sequentiell abarbeiten ist bei modernen Webdesign nötig. Dabei sind Gulp-Tasks ein wichtiger Bestandteil dieser tollen neuen Technologie. Gulp ist eine NodeJS Applikation, die natürlich auch in der Prozessverarbeitung ihre großen Vorzüge bezüglich der Performance hat. Asynchrone Prozessverarbeitung. Damit tun sich traditionelle Webdeveloper, gerade aus der PHP-Welt recht schwer. Hier findet man sich dann schnell in der sogenannten Callback-Hell wieder. An diesem Punkt sollte man sich natürlich fragen, ob man die richtige Technologie für das zu lösende Problem gewählt hat.

Gulp Task sequentiell ausführen – TYPO3 Gulp

In einer TYPO3 Migration von 6.2 auf 7.6 bin ich vor kurzem auf eine Herausforderung mit Gulp gestoßen. Hier war es wichtig die CSS-Files und JS-Files erst zu minimieren und dann an die richtige Stelle zu meiner Design Extension zu exportieren. So konnte unabhängig im Front- und Backend im Team gearbeitet werden.

const gulp = require('gulp');
const debug = require('gulp-debug');
const gulpLoadPlugins = require('gulp-load-plugins');
const wiredep = require('wiredep').stream;
const del = require('del');
const runSequence = require('run-sequence');

const $ = gulpLoadPlugins();

var stylesTarget = 'Resources/Public/Styles/';
var scriptsTarget = 'Resources/Public/Scripts';
var imagesTarget = 'Resources/Public/Images';
var fontsTarget = 'Resources/Public/Fonts';

gulp.task('clean-styles', del.bind(null, [stylesTarget]));
gulp.task('styles', () => {
  return gulp.src('../../rogoit-design/app/Styles/*.scss')
    .pipe(debug())
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest(stylesTarget));
});

gulp.task('clean-scripts', del.bind(null, [scriptsTarget]));
gulp.task('scripts', () => { // ['lint'],
  return gulp.src('../../rogoit-design/app/Scripts/**/*.js')
    .pipe(debug())
    .pipe($.plumber())
    .pipe($.babel())
    .pipe(gulp.dest(scriptsTarget));
});

gulp.task('vendor-scripts', () => { // ['lint'],
    return gulp.src(['../../rogoit-design/dist/Scripts/vendor/**/*', '../../rogoit-design/dist/Scripts/vendor.js'])
        .pipe(debug())
        .pipe(gulp.dest('Resources/Public/Scripts/vendor'));
});

gulp.task('clean-images', del.bind(null, [imagesTarget]));
gulp.task('images', () => {
  return gulp.src('../../rogoit-design/app/Images/**/*')
    .pipe(debug())
    .pipe($.imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{cleanupIDs: false}]
    }))
    .pipe(gulp.dest(imagesTarget));
});

gulp.task('clean-fonts', del.bind(null, [fontsTarget]));
gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('../../rogoit-design/app/Fonts/**/*'))
    .pipe(debug())
    .pipe(gulp.dest(fontsTarget));
});


function lint(files, options) {
  return gulp.src(files)
    .pipe($.eslint(options))
    .pipe($.eslint.format());
}

gulp.task('lint', () => {
  return lint('../../rogoit-design/Scripts/**/*.js', {
    fix: true
  })
  .pipe(gulp.dest(scriptsTarget));
});

gulp.task('compress', ['styles', 'scripts'], () => {
  return gulp.src(['Resources/Public/**/*'])
    .pipe(debug())
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
    .pipe(gulp.dest('Resources/Public'));
});

gulp.task('default', function(done) {
    runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {
        console.log('All tasks finished');
        done();
    });
});

Gulp Task sequentiell

Gulp Task sequentiell

Das hier ist das gesamte Script des Projekts. Vielleicht kann sich hier der eine oder andere entsprechend inspirieren. Grundsätzlich werden hier die Webfolder bzw. Targets geleert, die neuen Files hinein kopiert und dann komprimiert. Diese Prozesse können Aufgrund ihrer Aufgabenreihenfolge nicht asynchron abgearbeitet werden. Hier sind die entscheidenen Zeilen:

const runSequence = require('run-sequence');
.
.
.
gulp.task('default', function(done) {
    runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {
        console.log('All tasks finished');
        done();
    });
});

Man nutzt die „run-sequence“ Bibliothek, damit man die Tasks im default Prozess sequentiell ausführen kann.

Der TYPO3 Webdesign Blog Gulp run sequence – Gulp Task sequentiell abarbeiten erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/gulp-run-sequence-gulp-task-sequentiell-abarbeiten/feed/ 1
TYPO3 Seiten mit Extensions Plugin suchen PID http://www.rogoit.de/webdesign-typo3-blog-duisburg/typo3-seiten-mit-extensions-plugin-suchen-pid/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/typo3-seiten-mit-extensions-plugin-suchen-pid/#respond Sun, 30 Oct 2016 18:45:17 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=4921 Das Open Source CMS TYPO3 ist weit verbreitet und hat in den letzten Jahren auch von den Versionen einen großen Schritt nach vorne gemacht. Legacy Code und veraltete Versionen der eingesetzten Software stellen allerdings leider eine große Herausforderung in der so schon sehr angespannten Welt des Webdesigns dar. Naben dem Update der eigentlichen CMS Version [...]

Der TYPO3 Webdesign Blog TYPO3 Seiten mit Extensions Plugin suchen PID erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Das Open Source CMS TYPO3 ist weit verbreitet und hat in den letzten Jahren auch von den Versionen einen großen Schritt nach vorne gemacht. Legacy Code und veraltete Versionen der eingesetzten Software stellen allerdings leider eine große Herausforderung in der so schon sehr angespannten Welt des Webdesigns dar. Naben dem Update der eigentlichen CMS Version müssen allerdings auch immer wieder alle Extensions aktualisiert werden. Bei eigenen Extensions stellt das zum Teil eine sehr große Herausforderung dar.

TYPO3 Extensions im Pagetree suchen

TYPO3 Seiten mit Extensions Plugin suchen PID

TYPO3-Seiten-mit-Extensions-Plugin-suchen-PID

Es gibt unterschiedliche Wege sich die PIDs zu den eingesetzten TYPO3 Extensions anzeigen zu lassen. Tatsächlich gibt es genau für diesen Zweck auch wieder Extensions. Aber jede installierte Extension bedeutet auch immer mehr Aufwand, eine mögliche Sicherheitslücke in TYPO3 und in Zukunft auch immer mehr Arbeit. Von daher sollte man immer den einfachsten Weg wählen und der geht ganz einfach über die Datenbank.

TYPO3 Seiten mit Extension in Datenbank finden

Folgendes SQL-Statement kann einfach auf der Datenbank ausgeführt werden:

SELECT tt_content.pid,pages.title
FROM tt_content JOIN pages ON tt_content.pid = pages.uid
WHERE tt_content.list_type LIKE '%extensionkey%'
ORDER BY tt_content.uid DESC

Mit dem oben abgebildeten TYPO3 SQL Statement kann man ganz gezielt nach einem TYPO3 Extension Key suchen.

TYPO3 alle Seiten mit Extensions finden

Neben der Möglichkeit eine Extension zu suchen, ist es vielleicht auch wichtig alle eingesetzten Extension und ihre PIDs als Übersicht zu sehen. Das kann man auch einfach mit einem entsprechenden SQL Statement ausführen

SELECT tt_content.pid,pages.title
FROM tt_content JOIN pages ON tt_content.pid = pages.uid
WHERE tt_content.list_type <> ''
ORDER BY tt_content.list_type ASC

 

Der TYPO3 Webdesign Blog TYPO3 Seiten mit Extensions Plugin suchen PID erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/typo3-seiten-mit-extensions-plugin-suchen-pid/feed/ 0
OH-MY-ZSH zsh-autosuggestions key tab and color http://www.rogoit.de/webdesign-typo3-blog-duisburg/oh-my-zsh-zsh-autosuggestions-key-tab-and-color/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/oh-my-zsh-zsh-autosuggestions-key-tab-and-color/#respond Tue, 04 Oct 2016 20:37:45 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=4865 oh-my-zsh ist unter Webdevelopern sehr beliebt und mit dem zsh-autosuggestions Plugin bekommt man auch das nötige Fish-Feeling. Dabei müssen allerdings 2 kleine Settings vorgenommen werden, damit man Tabbing zur Verfügung hat und auch die farbliche Hervorhebung richtig einsetzen kann. zsh-autosuggestions muß installiert werden Im Gegensatz zu den meisten verfügbaren zsh-Plugins muß das Plugin zusätzlich installiert werden. [...]

Der TYPO3 Webdesign Blog OH-MY-ZSH zsh-autosuggestions key tab and color erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
oh-my-zsh ist unter Webdevelopern sehr beliebt und mit dem zsh-autosuggestions Plugin bekommt man auch das nötige Fish-Feeling. Dabei müssen allerdings 2 kleine Settings vorgenommen werden, damit man Tabbing zur Verfügung hat und auch die farbliche Hervorhebung richtig einsetzen kann.

zsh autosuggestions

zsh autosuggestions

zsh-autosuggestions muß installiert werden

Im Gegensatz zu den meisten verfügbaren zsh-Plugins muß das Plugin zusätzlich installiert werden. Hierfür gibt es eine hervorragende Dokumentation in der entsprechenden Readme Datei auf Github. Dabei wird das Plugin nicht nur im Kontext zu zsh eingesetzt. Hier muß nur folgender Befehl ausgeführt werden.

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

 

zsh-autosuggestions aktivieren

Die Autovervollständigung ist mit der Aktivierung des Plugins direkt aktiv. oh-my-zsh Plugins werden dabei, wie gewohnt on der .zshrc im Root-Folder des aktiviert.

plugins=(zsh-autosuggestions)

zsh-autosuggestions color setting

Per Default ist der Farbwert leider nicht so schön. Diesen kann man allerdings auch sehr einfach in der .zshrc anpassen. Mit dem Farbton „cyan“ hingegen bekommt man ein sehr angenehmes Farbschema, welches dem von Fish sehr nahe kommt.

ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE="fg=cyan"

zsh-autosuggestions key binding vor tabbing

Die wichtigste Funktion der Autovervollständigung ist allerdings das Tabbing. Also Wortweise vorspringen zu können. Sonst ist die Arbeit mit diesem ungalublich tollen Plugin nicht effektiv, sondern hinderlich und frustrierend.

bindkey '^f' vi-forward-blank-word

Änderungen an .zshrc wirksam machen

Es gibt 2 Möglichkeiten Änderungen, die an dem .zshrc durchgeführt wurden wirksam zu machen. Einmal kann man einfach in Tools, wie iTerm, einen neuen Tab öffnen und Änderungen dadurch wirksam werden lassen. Eine zweite Möglichkeit ist es auf der Command Line CLI einfach folgenden Befehl einzugeben.

source ~/.zshrc

zsh mit Plugins effektiv nutzen

Mit zsh ist es sehr gut möglich das Terminal zu beherrschen und sich schnell und effektiv zu bewegen. Aus diesem Grund haben wir auch schon eine Schulung bei Entwicklungshilfe NRW eingeführt und halten auch sehr häufig bei Usergroups Talks zu dem Thema. Hier geht es auch zu einer Präsentation zu dem Thema.

Der TYPO3 Webdesign Blog OH-MY-ZSH zsh-autosuggestions key tab and color erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/oh-my-zsh-zsh-autosuggestions-key-tab-and-color/feed/ 0
Git Checkout Files von anderem Branch http://www.rogoit.de/webdesign-typo3-blog-duisburg/git-checkout-files-von-anderem-branch/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/git-checkout-files-von-anderem-branch/#respond Tue, 20 Sep 2016 12:19:03 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=4769 Git Versionierung ist das Maß aller Dinge beim Webdevelopment mit PHP. Dabei ist natürlich ein Git Checkout ein elementares und wichtiges Kommando. In der Regel wird es allerdings nur dazu benutzt, um neue Branches zu erstellen, zwischen Branches zu wechseln und natürlich Files in der aktuellen Entwicklung zu resetten, also zurückzusetzen. Dabei hat das Git [...]

Der TYPO3 Webdesign Blog Git Checkout Files von anderem Branch erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Git Versionierung ist das Maß aller Dinge beim Webdevelopment mit PHP. Dabei ist natürlich ein Git Checkout ein elementares und wichtiges Kommando. In der Regel wird es allerdings nur dazu benutzt, um neue Branches zu erstellen, zwischen Branches zu wechseln und natürlich Files in der aktuellen Entwicklung zu resetten, also zurückzusetzen. Dabei hat das Git Command noch eine andere wichtige Funktion, die ich heute näher erläutern möchte.

Git Checkout File von Master

Schaut man sich einmal die offizielle Dokumentation zum Git Checkout Command an findet man weit mehr Funktionen, als den einfachen Wechsel zwischen Branches.

When or –patch are given, git checkout does not switch branches. It updates the named paths in the working tree from the index file or from a named (most often a commit)…The argument can be used to specify a specific tree-ish (i.e. commit, tag or tree) to update the index for the given paths before updating the working tree. https://git-scm.com/docs/git-checkout

Leider sind Dokumentationen nicht immer benutzerfreundlich geschrieben. Daher versuche ich mit diesem Blog-Post hier einmal ein wenig Licht in die technische Dunkelheit zu bringen. Grundsätzlich ist es in Git immer möglich mit Hilfe des ‚tree-ish‘ einen bestimmten Commit oder auch ein File von einem anderen Branch aus auszuchecken. Damit man seinen aktuellen Branch mit den Files eines bestimmten Commits aktualisieren kann ist folgendes nötig.

git checkout [-p|--patch] [<tree-ish>] [--] <pathspec>

Git Einzelnes File von anderem Branch auschecken

Git Checkout

Git Checkout – Aspectra

Es kommt natürlich auch bei den besten Webdevelopern vor, daß man sich einmal verstrickt hat. Wenn man mit PhpStormBest Practice arbeitet kenn man natürlich die nützliche Funktion mit einem Remote Branch zu vergleichen. Was aber, wenn man dahin zurück möchte. Es gibt natürlich auch den Fall, daß man sich vielleicht zu erst auf einen aktuellen Stand aus einem anderen Branch bringen möchte. Das kann man hier auch immer auf File-Ebene tun. Hier bietet sich der Web über ein Terminal an, da in in meinen Augen schneller und einfacher ist.

git checkout <branch_name> -- <paths>

Beispiel Git Einzelnes File von anderem Branch auschecken

Es kann sein, daß man gerade Codeception Tests einführt und die Tests auch in seinem Git-Branch verfügbar haben möchte. Hier gibt es natürlich die richtige Möglichkeit den kompletten Branch zu mergen. Hier treten natürlich auch keine Konflikte auf. Sicher? Natürlich besteht die Möglichkeit in seinem aktuellen Branch Änderungen an der composer.json gemacht zu haben. Und vielleicht hat man diese verworfen, will aber trotzdem den Stand von dem anderen Branch.

git checkout cc-testing -- composer.json
git commit -m "Update composer.js from cc-testing"

Fazit Git Checkout Files von anderem Branch

Leider ist die Nutzung der Command Line für viele Webdeveloper noch ein immer eine große Hürde sich fundiertes und professionelles Wissen über Git leicht zugänglich zu machen und anzueignen.

Ich benutze PhpStorm und brauche keine Git-Commands – Webdeveloper mit 4 Jahren Berufserfahrung

Leider fällt mir da auch nicht immer die passende Antwort bei Schulungen ein und ich begebe mich verlegen in ein Schweigen. Natürlich ist das ein Einstellungsproblem und es ist leider exemplarisch für die Realität. Etwas beurteilen zu können setzt in diesem Falle natürlich Fachwissen voraus. Das hier jetzt detailliert auszuführen ist sicher nicht in dem Sinn meiner Leser.

Git bietet tolle Möglichkeiten und entwickelt sich natürlich auch weiter. Gerade in dem letzten Release ist auch wieder ein Fokus bei den neuen Features auf die Command Line gelegt worden. Hier lohnt es sich definitv auf dem laufenden zu bleiben und sich auch seine eigenen Sourcen aktuell zu halten. Eine Git-Schulung und auch eine Schulung oh-my-zsh biete ich im Rahmen von Entwicklungshilfe NRW an.

Der TYPO3 Webdesign Blog Git Checkout Files von anderem Branch erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/git-checkout-files-von-anderem-branch/feed/ 0
Bash Script für SQL Files in Folder – Database Migration Deployment http://www.rogoit.de/webdesign-typo3-blog-duisburg/bash-script-sql-files-folder-database-migration-deployment/ http://www.rogoit.de/webdesign-typo3-blog-duisburg/bash-script-sql-files-folder-database-migration-deployment/#respond Sun, 11 Sep 2016 09:19:10 +0000 http://www.rogoit.de/webdesign-typo3-blog-duisburg/?p=4782 Es gibt unterschiedliche Möglichkeiten ein automatisiertes SQL Depoyment durchzuführen. SQL Files sind hier eine Option. Dabei kann man dann alle zugehörigen SQL Files in einen Release Folder ablegen und manuell ausführen. Das ist leider keine sehr elegante Lösung, da man hier nicht ohne weiteres zurück rollen kann. Man kann also so gesehen nur nach vorne [...]

Der TYPO3 Webdesign Blog Bash Script für SQL Files in Folder – Database Migration Deployment erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
Es gibt unterschiedliche Möglichkeiten ein automatisiertes SQL Depoyment durchzuführen. SQL Files sind hier eine Option. Dabei kann man dann alle zugehörigen SQL Files in einen Release Folder ablegen und manuell ausführen. Das ist leider keine sehr elegante Lösung, da man hier nicht ohne weiteres zurück rollen kann. Man kann also so gesehen nur nach vorne gehen und hat zudem das Risiko SQL-Statements, die nur einmal ausgeführt werden sollen öfter auszuführen.

SQL Files in Folder mit Bash Script ausführen

#!/bin/bash
sqlfiles=(*.sql)
for i in "${sqlfiles[@]}"
do
 if grep -q PROCEDURE "$i"; then
    echo $i
    mysql -h127.0.0.1 -udbuser -pdbpass exactag < $i
 fi
done

SQL Files Bash Script - googlinux.com

SQL Files Bash Script – googlinux.com

Damit man nicht manuell alle SQL Files einzeln ausführen muß kann man ein Bash-Script nutzen. Das führt dann dann alle SQL Files automatisiert aus. Das oben abgebildete Bash-Script kann das auf eine einfache und unsichere Art tun. Es leider nötig Username und Passwort für die DB mit abzuspeichern. Allerdings erfüllt das Bash-Script seinen Zweck. Es interiert im aktuellen Folder über alle SQL Files und führt diese mit dem MYSQL-Command aus.

Professionells Webdevelopment und Deployment mit Migrationen

PHP Migration Phinx

PHP Migration Phinx

Eine zuverlässige und sichere Lösung bieten Migration Tools, wie Phinx. Hier ist es möglich neue Änderungen einfach automatisiert durchzuführen. Dadurch behält man zu jedem Zeitpunkt die Kontrolle über den aktuellen DB Status. Damit ist es einfach und übersichtlich einen Rollback durchzuführen. Zudem wird verhindert, das SQL-Files doppelt ausgeführt werden. DB Migrations gibt es auch Out-Of-The-Box in vielen PHP-Frameworks. Hier kann man das Doctrine Migrations Bundle in Symfony und die Database Migrations im Laravel Projekt sehr empfehlen. Beim Refactoring von Legacy Code Anwendungen bietet sich Phinx sehr gut an, da es autark neben dem bestehenden Projekt mit Composer einfach hinzugefügt werden kann.

Unterstützung beim Web zu Continuous Integration

Wir haben uns seit langen auf automatisiertes Deployment und Continuous Integration spezialisiert. In den jüngsten Kunden-Projekten haben wir es erfolgreich eingeführt. Dieses Angebot werden wir in den nächsten Monaten gezielt ausbauen. Hier werden wir unter anderem fertige Codeception-Tests für allgemeine Tests und Screenshots in unterschiedlichen Display Auflösungen anbieten. Ein aktuelles Angebot gibt es dazu hier. Build Pipelines für PHP-Projekte.

Der TYPO3 Webdesign Blog Bash Script für SQL Files in Folder – Database Migration Deployment erschien zuerst auf Webdesign und TYPO3 Blog aus Duisburg.

]]>
http://www.rogoit.de/webdesign-typo3-blog-duisburg/bash-script-sql-files-folder-database-migration-deployment/feed/ 0