Komprimierung aktivieren Webdesign Performance

Ein sehr hilfreicher Schritt ist bei der Webdesign Performance Optimierung ist es die Komprimierung für das HTTP-Übertragungsprotokoll zu aktivieren. Alle Browser unterstützen das. Hier zeige ich, wie das geht und was das überhaupt ist.

Webdesign Performance Optimierung Page Speed Analyse

Wir nutzen wieder Google Chrome Page Speed Analyse. Wie das funktioniert habe ich ja in dem letzten Artikel zum Thema Bilder Optimierung bereits beschrieben. Hier wählen wir diesmal den Reiter Page Speed Komprimierung aktivieren.

Webdesign Performance Page Speed Komprimierung aktivieren

Webdesign Performance Page Speed Komprimierung aktivieren

Die Komprimierung der Ressourcen

“Mit gzip oder deflate kann die Anzahl der über das Netzwerk gesendeten Byte reduzieren. Ermöglichen Sie die Komprimierung der folgenden Ressourcen, um die Übertragungsgröße um 781.4 KB (78%) zu reduzieren.” Das steht bei dem Page Speed Hinweis.  Und das ist schon ein echt tolles Ergebnis, dafür das man nur ein paar Einstellungen und der .htaccess Datei vornehmen muß. Ich gehe in diesem Artikel nicht weiter auf die serverseitige Installation ein. Soviel mag allerdings gesagt sein. Es müssen Libraries installiert und über die php.ini global aktiviert werden. Der Gewinn dabei ist riesig. Alle statischen Files die vom Server zum Client übertragen werden können dabei verkleinert transportiert werden.

Komprimierung aktivieren Webdesign Performance

Mit einigen Zeilen in der .htaccess Datei im Root Verzeichnis kann man die Komprimierung aktivieren und so die Webdesign Performance stark erhöhen. Voraussetzung ist einerseits serverseitig die Bibliotheken zur Verfügung zu stellen und das die .htaccess Datei aktiviert ist. Beides soll hier an der Stelle jetzt vorausgesetzt sein.

.htaccess Einstellung gzip deflate

AddOutputFilterByType DEFLATE text/plain text/html text/xml
AddOutputFilterByType DEFLATE text/css text/javascript
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript application/x-javascript

Komprimierung aktivieren Page Speed Webdesign Performance

Komprimierung aktivieren Page Speed Webdesign Performance

jQuery Link von Bild entfernen

jQuery Link von Bild entfernen


$(".threecolumn a").each(function(){
if($(this).attr('href').indexOf('empty.png') >= 0){
$(this).contents().unwrap();
}
});

jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

Der oben abgebildete Codeschnipsel ist in seiner Form einem Typo3 Projekt entnommen worden. Es gibt dort eine 3 spaltige Mitarbeiter Übersicht. Leider ist TYPO3 immer wieder eine Hölle im Detail. Hat ein Mitarbeiter kein Bild, obwohl man das Text mit Bild Template ausgewählt hat, kommt das HTML nicht so raus, sagen wir mal wie ich mir das so wünsche. Deshalb muß ich leider auf diesen TYPO3 Hack mit der Auswahl eines empty.png zurück greifen. Damit die ganze Sache aber schön benutzerfreundlich bleibt und der eh von Da-muß-man-nur völlig überforderte TYPO3 Redakteur nicht auch noch bei denen die Bilder vergrößern Funktion abstellen muß habe ich das oben abgebildete jQuery snippet eingefügt. Hier bleibt vielleicht noch zu sagen, da es sich um einen Fancybox Link handelt ist der Bildpfad href Targets des Links. In diesem Fall dient also der Bildname als Segment der Identifikation für den Case.

Sicherlich ist das keine saubere Lösung die Seite erst falsch rendern zu lassen und dann das HTML Dom nachträglich über jQuery zu korrigieren. Allerdings ist es ein vom Entwicklungsaufwand her gesehen leichtes Mittel gerade im Bereich von TYPO3 so Korrekturen vorzunehmen oder auch Features zu implementieren. Es ist möglich sehr viel mit jQuery zu zaubern und gerade so ein kleiner jQuery Code Schnipsel ist natürlich wesentlich schneller programmiert als über Typoscript den Rendering Prozess zu beeinflussen. Ehrlich gesagt hätte ich an der Stelle gar nicht gewusst, wo ich hier ansetze und einen Case einbauen kann.

Weiterführende Links zum Thema jQuery und TYPO3
Offizielle Seite jQuery.com
Offizielle Seite typo3.org
TYPO3 Programmierung aus Duisburg

TYPO3 indexed search no result

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Dieser Artikel handelt von einem Problem, daß bei mir in der Form in einem TYPO3 4.7 Projekt aufgetreten ist. Im wesentlichen waren es bei mir 2 Eistellungen, die zum Erfolg geführt haben. Einmal das config.no_cache = 0 und plugin.tx_indexedsearch.result_link_target = 34 (Suchausgabe PID) zu setzen.

TYPO3 indexed search no result

Man kennt das ja nur zu gerne bei der Entwicklung mit TYPO3. Der Teufel steckt bekanntlich im Detail. Das TYPO3 Plugin bzw. TYPO3 Extension indexed search (tx_indexedsearch) kann, wie eigentlich der Name ja auch schon vermuten lässt nur indexierte Inhalte lesen. Dafür muß dann, wie oben abgebildet, no_cache auf 0, also abgestellt werden. Das habe ich dann getan und mir auch die aktuelle Beispiel Typoscript Konfiguration von der TYPO3 Wiki Seite eingebaut. Leider gab das immer noch keinen Erfolg. Erst durch das hinzufügen der Page ID – PID für das result_link_target ging dann alles. Hier im Anhang ist jetzt mein komplettes Typoscript für indexed search abgebildet. Zu beachten ist, das die Werte

page.config.index_enable = 1
page.config.index_externals = 1

bei mir in einer speziellen Config Datei gesetzt werden.

Typoscript für indexed search


# ==============================================================================
# The INDEXED_SEARCH template
# Indexed Search an extension for searching content in the frontend.
#
# For a full description of the configuration options, check the manual of this extension.
# Extension manuals are normally included in the extensions as Open #Office documents,
# and can be accessed directly from the module Ext Manager in the TYPO3 backend (select the option 'loaded extensions or install extension'.
#
# For the extension indexed search, the documentation is delivered in a separated extension with the extension key 'doc_indexed_search',
# which is also provided #with this Demo Package.
# ==============================================================================

# Configuration for indexedsearch plugin

plugin.tx_indexedsearch {
search.rootPidList=1
view.defaultPid = 79
result_link_target = 79
# erweiterte Suche abschalten
show.advancedSearchLink = 0

# standardmässig mit ‘Wortteil’ suchen statt mit ganzem Wort
_DEFAULT_PI_VARS.type = 1
# standardmäßig mit erweiterter Suche starten
_DEFAULT_PI_VARS.ext = 1

# Anzeige regeln, ein- (1) bzw. ausgeblendet (0)
show {
# Suchregeln
rules = 0
# Erstellungsinformationen des Hashes
# parsetimes=1
# Zweite ebene im Bereichs-dropdown anzeigen
# L2sections=1
# Erste ebene im Bereichs-dropdown anzeigen
# L1sections=1
# Alle “nicht im menü” oder “im menü verstecken”
#(aber nicht “versteckte” seiten) mit anzeigen in section?
# LxALLtypes=0
# leeren des Suchfeldes nach suche
clearSearchBox = 1
# Aktuelles suchwort zu den bisherigen suchwörtern hinzufügen
# clearSearchBox.enableSubSearchCheckBox=0
}

# die Auswahlfelder für die Suchparameter werden ein- (0) bzw. ausgeblendet (1)
blind {
# Suchtyp (Ganzes, Wort, Wortteil, ..)
type=1
# default option (Und, Oder)
defOp=1
# Bereich(e) der website
sections=1
# Suche in Medientypen
media=1
# Sortierung
order=1
# Ansicht (Sektionshierachie / Liste)
group=1
# Sprachwahlbox
lang=1
# Auswahl Sortierung
desc=1
# Ergebnisse (Anzahl der Treffer pro Seite)
results=10
# Ansicht: Erweiterte Vorschau
extResume = 1
}
}

TYPO3 indexed search no result – Weiterführende Links

http://wiki.typo3.org/De:Indexed_search
http://stackoverflow.com/questions/11677289/typo3-4-7-indexed-search-wont-work

Persieing van Persie Fun pics WM

Persieing van Persie WM Quelle Facebook Twitter

Persieing van Persie WM Quelle Facebook Twitter

Persieing ist ein Webtrend ausgelöst durch den tollen Kopfball von dem Niederländer van Persie bei der WM 2014 in Brasilien.

#Persieing als Webtrend auf Twitter und Facebook

Es war eines der tollsten Treffer, die es jemals gegeben hat. Robin van Persie köpft das 1:0 im spanischen Debakel von der WM in Brasilien und leitet damit den historischen 5:1 Sieg der Niederlande gegen den amtierenden Weltmeister Spanien. Das Team der Spanier konnte sich nicht mehr von dem Schock erholen und unterlag auch gegen Chile mit 2:0 und schied somit bereits in der Gruppenphase aus.

Das Tor, ein Flugkopfball löste einen Webtrend aus. #persieing auf Twitter und #persieing auf Facebook sind die beliebten Hashtags für die Bilder der Webuser, die sich waagerecht auf Fotos ablichten und den Flugkopfball nachstellen. Das geht weltweit so und neben Persieing Babyfotos sind auch viele Erwachsene eifrig am Persieing gibt es auch jetzt schon eine ganze Reihe von Fun Pics zu dem Thema. Die Bilder sind dabei sehr schnell geschossen und müssen nicht aufwendig gestellt werden. Auch ganze Gruppen, Vereine und Mannschaften machen bei den Trend mit.

Periesing Weiterführende Links zum Thema
https://www.facebook.com/PersieingNL?fref=ts
http://www.sportschau.de/fifawm2014/video/videoueberpersieingundrobbening100.html
http://www.sport1.de/de/fussball/wm/newspage_908931.html

TYPO3 Update: typo3_src mit wget downloaden

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Ein neues TYPO3 Update auf dem bekannten Open Source CMS TYPO3 auf die Version 6.2 hat in Zukunft viele Updates der TYPO3 Instanzen zur Folge. Dabei hat es das neue Release in sich. Unter anderem bringt es ein viel besseres Install Tool mit und soll auch Ssystemupdates von der TYPO3 V 4.x problemlos unterstützen. Zusätzlich ist es auch mit einem Twitter Bootstrap Package ausgestattet und kann so “Out of the box” schnell Responsive Webdesign produzieren. Für TYPO3 Updates ist es nötig, die neuen TYPO3 Source Dateien zu laden und einzubinden. Serverseitig kann man hier sehr gut mit wget die Files runterladen und dann entpacken.

wget Befehle zum Download von TYPO3 Source files
Aktuellste Version 
wget get.typo3.org/current
Aktuellste Version aus einem bestimmten Release
wget get.typo3.org/6.2
Exakte Version
wget get.typo3.org/4.6.17

NodeJS Tutorial: is_file prüfen ob eine Datei existiert

NodeJS Logo

NodeJS Logo

NodeJS snippet zur Überprüfung nach einer Datei

var fs = require('fs-extra');
fs.exists(file, function(exists) {
if (exists) {
// File exist
} else {
// File is not existing
}
});

NPM - Nodel Module Package Manager

NPM – Nodel Module Package Manager

Um mit NodeJS zu überprüfen, ob eine Datei existiert ist der oben genannte NodeJS snippet nötig. Man kann con den Node Packaged Modules fs-extra verwenden. Da hat man mehr Möglichkeiten als nit mit dem fs-Package. In dem oben genannten snippet macht es allerdings keinen Unterschied.

Weiterführende Links zum Thema NodeJS
Offizielle internetseite NodeJS
http://www.nodejs.org/

Node Package Modules
https://npmjs.org/

Produktivkiller für Programmierer: Macho Developer

Webdesign TYPO3 Duisburg Produktiv Killer Quelle Infoworld

Webdesign TYPO3 Duisburg Produktiv Killer Quelle Infoworld

Unter den Webdevelopern gibt es zwei besonders schwierige Persönlichkeiten. Den Macho Developer und den Cowboy Developer. In meiner Artikelreihe Produktivitätskiller für Programmierer werde ich zu beiden Themen schreiben. Dem Macho Developer werde ich mehr auf die Persönlichkeit schauen und dem Cowboy Developer mehr auf die Technik.

Programmierer sind männlich
Es gibt einen Witz “Wie viele attraktive Programmiererinnen braucht man um eine Glühbirne zu wechseln? Alle beide!”. Also das ist ein Gerücht. Ich kenne einige hübsche Programmiererinnen, sogar mehr als nicht hübsche. Aber der Prozentsatz an Frauen in dem Beruf ist tatsächlich sehr gering. Daher ist es eine sehr männliche Welt. Auch Frauen müssen hier männliche Arten annehmen. Es hat etwas von einem Gorilla Rudel mit Silberrücken. Grundsätzlich teilen sich die Karrierstufen eines Entwicklers in 3 Stationen. Der Junior Webdeveloper ist ein Berufsanfänger nach der Ausbildung. Danach kommt der Webdeveloper gefolgt vom Senior Webdeveloper. Und in dieser Hierarchie gibt es sehr viel Neid. Senior Webdeveloper Stellen sind sehr selten und am besten bezahlt. Wann jemand Senior wird hängt allein von der Gnade des Unternehmens ab. Grundsätzlich bedeutet es unter eigener Verantwortung Projekte ohne Hilfe realisiert zu haben. Und natürlich dadurch ein Wissen vom Eingang des Layouts bis zur Livestellung anzuwenden. Das ist heute allerdings viel schwieriger, da Projekte als Team langjährig produziert werden. Ich habe tatsächlich noch über 50 Internetseiten programmiert und ins Netz gebracht. In Zeiten als die Seiten einer Webseite noch einzeln abgerechnet wurden. Das ist heute nicht mehr so. Und auch das Frontend und Backend einer Seite wird mehr und mehr separates Spezialgebiet. Die Arbeitsstunden, die für eine Seite gebraucht werden, sind durch die gewachsenen Ansprüche ein, vielfaches von dem vor ein paar Jahren. Der Begriff Senior Entwickler bezieht sich wieder mehr auf Spezialistentum als auf Allroundfähigkeiten. Schlimmer noch, wenn man nicht auf dem laufenden bleibt geht es die Karriereleiter wieder runter. Und was in Marketing Abteilungen und bei anderen Abteilungsleitern gängig ist – Verjüngung – zerstört natürlich den Olymp der Codegötter und Silberrücken. Jahrelang angehimmelt und jeder Euro der Firma, jede Karre in der Tiefgarage und jede Kröte, die gehüpft ist, kam nur aus ihrer Tastatur. Und dann sowas. Ein junger Bursche kommt daher und macht diesen Platz streitig. Und genau da entsteht der Macho Developer. Posen, austeilen und unfair sein. Einschüchtern und neue Leute nicht in das Projekt integrieren. Coder, die nicht mehr so gut sind, greifen sich Bereiche raus. So genannte Zuständigkeiten. Registrierung, Login, Export, internes CMS. So eine Sache für die sie vollständig und auch Vollzeit alleine zuständig werden. Da lassen sie dann auch niemanden mehr ran. Und das frustriert Kollegen und am Ende auch den Entwickler selbst. Junge Coder hauen ab, den alten wird man nur sehr schwer los. Der Schaden für das Unternehmen sehr groß. Hier sind Teamleiter gefragt. Aus fehlender Karriereperspektive sind aber genau das die Codebären das geworden. Und mit der Macht und einer Sozialkompetenz von Godzilla kann ein ganzes Unternehmen vor die Wand gefahren werden:

Fazit zu Macho Developern
Nicht jeder der einen schwierigen Charakter hat muß direkt gefeuert werden. Aber es sollte klare Regeln geben. Eine Beförderung zum Teamleiter darf nicht passieren. Es gibt Leute bei denen braucht das Umfeld halt ein dickeres Fell. Arbeit muß Spaß machen, wenn sie gute Ergebnisse erzielen soll. Ein schlechtes Betriebsklima hat katastrophale Folgen. Da bringt es auch nichts in bestimmten zeitlichen Abständen eine Latte guter Vorsätze abzuspulen. Auch das Klammern an irgendwelche Projekte ist echt hinderlich. Das bringt beide Seiten nicht weiter. Das Unternehmen kann bei den hohen Personalkosten mit der alten Software nicht konkurrenzfähig bleiben und der Coder kommt in seinem Leben auch nicht mehr auf einen grünen Zweig, wenn er seinen CV leer hält. Man muß jeden Tag dran bleiben und alles geben.

Webdev: Xdebug Limit mit TYPO3 Increasing nesting functions calls limit

YouTube Video Tutorial Sicherheit Secure PHP Webdesign aus Duisburg OOP Objektorientierte PHP Programmierung Getter Setter

YouTube Video Tutorial Sicherheit Secure PHP Webdesign aus Duisburg OOP Objektorientierte PHP Programmierung Getter Setter

php.ini settings / Einstellung limit für nesting functions erhöhen
xdebug.max_nesting_level = 400

In Entwicklungsumgebungen nutzt man natürlich die hervorragenden Möglichkeiten die einem Xdebug bietet. Allerdings ist es hier nötig beim Debugging im Zusammenspiel mit komplexen Webanwendeungen gerade bei dem CMS TYPO3 das Limit für verschachtelte Funktionen zu erhöhen. Es gibt hier unterschiedliche Erfahrungswerte mit welchem Wert man hier arbeiten kann. 400 geht auf jeden Fall in der Version 6.x. Natürlich sollte man hier auch genug Leistung in der Dev-Maschine zur Verfügung stellen.

TYPO3 Extbase snippet: Pagetree rekursive / recursive von PID ausgeben

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Um bei einer TYPO3 Extbase Backend Extension den Pagetree rekursive zur PID auszugeben ist folgender PHP-Code nötig:

$iPid = $_GET['id]; //PID
$depth = 999999;
$queryGenerator = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance( 'TYPO3\\CMS\\Core\\Database\\QueryGenerator' );
$rGetTreeList = $queryGenerator->getTreeList($iPid, $depth, 0, 1); //Will be a string
$aPids = explode(',',$rGetTreeList);

Mit dem oben abgebildeten TYPO3 Extbase Backend Extension Snippet ist es möglich über den TYPO3 Core Query Generator die PID der Subpages auszugeben. Dabei wird allerdings leider ein kommaseperierter String zurück gegeben, bei dem die AusgangsPID als erstes Element aufgeführt wird. Mithilfe der explode() PHP-Function kann man sich hier ein Array zurückgeben lassen.

TYPO3 Snippets: Symlinks für Source Dateien nutzen

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Linux Commands CLI für Symlinks der TYPO3 Sourcen
Symlink für die index.php
ln -s t3source/typo3_src-x.x.x/index.php index.php

Symlink für typo3-Folder
ln -s t3source/typo3_src-x.x.x/typo3/ typo3/ -R

Symlink für typo3_src-Folder
ln -s t3source/typo3_src-x.x.x/typo3_src/ typo3_src/ -R

Symlink für t3lib-Folder
ln -s t3source/typo3_src-x.x.x/t3lib/ t3lib/ -R

Es ist sehr sinnvoll die TYPO3 Core Sourcen des TYPO3 CMS auszulagern. Das darf gerne unter dem aktuellen TYPO3 Projektverzeichnis passieren. Den großen Vorteil bei der Nutzung von TYPO3 Symlinks bietet sich in Falle eines TYPO3 Updates. Hier ist es mit wenigen Kommndozeilen im Linux CLI möglich neue Sourcen zu verwenden, ohne bestehende TYPO3 Folder löschen oder umbenennen zu müssen. Das ist aber nicht alles was für ein TYPO3 Update nötig ist. Ich bin jetzt nicht so geneigt zu behaupten, daß man hier auch besonders viel TYPO3 Webspace spart. Aber für manche Leute zählt auch das als Argument. Ich finde es eher unübersichtlich ein Folder mit vielen TYPO3 Sourcen zu haben und nicht genau zu wissen, was hier alles noch wo genau verwendet wird. Auch ist es, wenn man die TYPO3 Symlinks im Projekt Folder nutzt, wesentlich einfacher einen TYPO3 Serverumzug durchzuführen. Sowas kann sich ja immer mal gerne unerwartet schnell ergeben.

TYPO3 Projekt Folder
Die hier aufgeführten TYPO3 Folder und TYPO3 Dateien sind für das eigentliche TYPO3 Projekt. Diese werden also für jede TYPO3 Instanz individuell benötigt und befinden sich im Projekt TYPO3 Root Folder.

  • /fileadmin
  • /typo3conf
  • /typo3temp
  • /uploads
  • _.htaccess
  • clear.gif

TYPO3 Source Folder

  • /typo3
  • /typo3_src
  • /t3lib
  • index.php

Für jede TYPO3 Version stehen die entsprechenden TYPO3 Source Files zur Verfügung. Die können ja auch immer aktuell von der TYPO3 Seite http://typo3.org/download/ runtergeleden werden.

Hinweis zu TYPO3 Updates

Administration und Hosting von Open Source Linux Webservern aus Duisburg

Administration und Hosting von Open Source Linux Webservern aus Duisburg

An dieser Stelle auch der Hinweis, daß nicht jede TYPO3 Version beliebig mit den neuen Versionen kompatibel ist. Gerade neue Major Releases – also eine neue Versionsnummer – sind recht problematisch und irgendwann ändern sich natürlich auch PHP Versionen und MySQL Versionen. Regelmäßige Updates sparen hier Nerven.