Blog - Hannes Pries - Webdeveloper Blog - Entwicklung mit Shopware, PHP, HTML5 und JavaScript

Development: FTP-Sync anstelle von Docker

Viele erinnern sich noch an Zeiten, wo man direkt auf einem Webserver seinen HTML-Seiten und Scripts geschrieben und getestet hat. HTML ging meistens schon lokal, aber wenn es um PHP oder anderes ging brauchte man einen Server. Dann schwenkte man auf XAMPP um, wo man einen lokalen Apache nutze. Linux brachte den Apache und PHP direkt mit. Aber man hatte oft kein Linux und half sich mit VirtualPC oder VirtualBox, so man entweder eine shared Speicher hatte oder ganz klassisch per FTP oder später SCP/SSH seine Dateien aus der IDE ins Zielsystem bekam. Dann kam Docker und die Welt wurde gut.. über all gut? Nein, dann erstaunlich viele gerade im Agentur-Bereich arbeiten immer noch mit einem Server und einem FTP-Sync. Gut heute oft mit SFTP oder SCP, aber ohne Docker oder lokalen Webserver.
Während ich klassische vServer mit Apache und ohne Reverse-Proxy und Docker für veraltet halte, sind sie noch öfter Realität als Docker-/K8n-Umgebungen. Selbst shared-Hosting für produktive Umgebungen sind noch öfters anzutreffen.

Nach einem Gespräch, wo noch direkt auf dem Server gearbeitet wurde und nicht mal eine lokale IDE einen Sync in Richtung Server vornahm sondern direkt die Datei vom Server aus geöffnet wurde (da kann man fast direkt mit vi auf dem Server arbeiten...), hier eine einfache kostenlose Lösung, wo man wenigstens die Dateien lokal hat und so auch ohne Probleme mit Git arbeiten kann.

Genutzt wird VisualStudio Code (die Intellij-IDEs bringen so einen Sync direkt von Haus aus mit, kosten aber in den meisten Varianten Geld).

Ein Plugin installieren:

FTP-Config anlegen (wird geöffnet nach dem ersten Sync-Versuch):

Wenn uploadOnSave aktiviert ist am Besten die IDE noch mal neustarten.

Geht auf jeden Fall besser als WinSCP parallel zum Sync laufen zu lassen.

Würde ich so entwickeln wollen? Nein. Besonders wenn mehr als ein Entwickler an einem Projekt arbeiten, geht nichts über Docker. Für Shopware habe ich gute Images oder man nimmt Dockware, was gerade für Entwickler an sich vollkommen reicht.

Shopware 6: HTML-Sanitizer deaktivieren

Während man in 6.4 noch beliebigen eigenen HTML-Code in z.B. CMS-Elementen oder Snippets eingeben konnte, filtert 6.5 Teile dieses Codes nun heraus. Er gilt als möglicherweise unsicher. Wenn man nun von 6.4 auf 6.5 migriert und z.B. style-Tags entfernt werden, wäre es sehr aufwendig alles nun in SCSS und dem Theme unterzubringen. Einfacher ist es den Sanitizer zu deaktivieren und das selbe Verhalten wie bei 6.4 wieder zu haben.

In der config/packages/shopware.yaml kann den Sanitizer einfach deaktiveren.

shopware:
html_sanitizer:
enabled: false

cJSv2: Services und Service-Injection

Ich hab cJSv2 jetzt soweit erweitert, dass man nun sich einfach in verschiedene Services in seine Controller injecten lassen kann (und ist dann unter seinem Namen oder einem Alias dort direkt aufrufbar). Jeder Service ist Singleton, so dass jeder Controller auf die selbe Instance des Services zugreift.
An sich wird damit die cjsGetController Methode, mit der sich Controller untereinander mit ihren Namen konnten, überflüssig und man kann einfach asynchrone/reactive Lösungen basteln.

Hier erst einmal ein kleines synchrones Event-System:

CSS overflow und ellipsis

Ein kleiner Tipp, wenn man in einer Webapp zulange Listen- oder Tabelleneinträge zurecht schneiden möchte. Um anzuzeigen, dass der Text gekürzt ist will man oft ... am Ende stehen lassen. Das mit PHP, JavaScript, etc zu machen ist aber doof und overflow-hidden: hidden reicht nicht. Aber es gibt in CSS text-overflow.

.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Der Text wird einzeilig und abgeschnitten. Zusätzlich werden 3 Punkte angehängt. Alles gut? Nur solange man es nicht bei einem <li> mit Bullet-Points verwendet. Die gehen dabei leider auch verloren. Aber auch hier gibt es eine Lösung, wobei man aber die Abstände des <li> zum linken Rand neu anpassen muss.

li.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
list-style-position: inside;
}

Bootstrap Pointer-Cursor

Wenn man mit Bootstrap eine Oberfläche baut und auf einem nicht Link gerne den Pointer als Cursor hätte, gibt es da eine einfache Lösung:

<li role="button" ng-click="doSomething()">Blubb</li>

Ob sich die Entwickler von Bootstrap die Verwendung so gedacht haben, kann ich nicht sagen, aber es funktioniert.

Shopware: Einkaufswelten Code-Element

Eine wichtige Erkenntnis das Code-Element in Shopware Einkaufswelten betreffend ist, dass es Smarty unterstützt. Wer also im HTML-Teil direkt JavaScript verwenden will muss etwas mit den geschweiften Klammern aufpassen. Das gilt besonders, wenn man einfach minimized Code-Snippets von einem Anbieter in die eigene Seite integrieren möchte.

function (x) {
alert(x);
}

oder

{literal}
function(x){alert(x);}
{/literal}

funktionieren.

CodeMirror für HTML-Code Liebhaber

In letzter Zeit habe ich CodeMirror lieben gelernt. Ich mag es nicht mit TinyMCE zu arbeiten und normale TextAreas sind für HTML-Coding wirklich schrecklich. Wenn man in einem System HTML-Templates bearbeitet, will man Einrückungen und Syntax-Highlighting.

Mit Code-Mirror hat man da und es ist wirklich leicht zu verwenden. Man hat eine Variable pro Editor und das einbringen von Code von Außen (z.B. das hinzufügen von Bilder-Links durch ein Klick auf ein Bild) ist sehr einfach.

//for codemirror
if(main){
main.replaceSelection(textToInsert);
}

Und es gibt sogar einen Mode für BBCode. Damit wird jetzt das Blog-Modul betrieben, wenn man sich gegen HTML mit TinyMCE entscheidet.

Wer also XML oder HTML Code in seiner Web-Anwendung bearbeiten muss oder seinen Benutzern BBCode anbietet kann das mit CodeMirror wirklich leicht und schnell einbauen.

Auch mit BBCode

Eigene Validierung für Inputs

Ein kleines Beispiel wie man sich eine eigene Validierung für Inputs in JavaScript basteln kann. Man kann es natürlich beliebig komplex machen und es sollte auch super mit Ajax funktionieren. Nur mit nicht required Inputs habe ich so mein Problem, da ich die gerne in neutraler Farbgebung hätte, wenn nichts eingegeben ist. So wären sie momentan einfach "valid" und damit grün. Falls dort jemand eine Lösung kennt, wäre es echt toll.

<html>
<head>
<style type="text/css">
input:valid{
border-color:#00FF00;
}

input:invalid {
box-shadow: none;
border-color:#FF0000;
}
</style>
</head>
<body>
<label>Test (should be 'allo')</label> <input id="blubb" type="text" required/>
<script type="text/javascript">
var func=function(){
var el=document.getElementById("blubb");
if(el.value=="allo"){
el.setCustomValidity("");
}
else{
el.setCustomValidity("value is not allowed");
}
}
document.getElementById("blubb").onchange=func;
</script>
</body>
</html>

Kleine SEO Checkliste

Ein paar Dinge auf die Ich geachtet habe und am Ende wohl auch etwas gebracht haben. Jedensfalls gehen Klicks und Impressions seit den Änderungen weiter nach oben. Jetzt nicht so dass man dieSeiten als erfolgreich bezeichnen könnte.
Aber die Seiten werden gefunden!

* ist der Viewport über ein <meta>-Tag gesetzt? (Wegen Mobile-frundlichern Setien und Google)
* Hat der Title alle 4-5 wichtigen Keywords und ist auf für Menschen noch gut lesbar? (kein zu langer Name am Anfang!)
* enthalten Links als Text und Title Keywords?
* Wird Mapping über Rewrites verwendet um nciht immer auf index.php oder zu verlinken? (in der URL Keywords verwenden)
* werden <nav>-Tags verwendet?
* werden <article>,<header>,<section> Tags verwendet? (Gerade bei Blogs und Newsseiten)
* Ist der meta-Description Text für Besucher ansprechend? (Der Text ist eher für Menschen als für die Suchmaschinen-Bots)
* Wurde eine Sitemap bei Google eingereicht?
* sind die Ladezeiten der Seite ok? (nicht so wichtig, aber ist für die Besucher schöner. Zur Not.. Profiling und Code-Analyse)

Angular und native Forms

Wer mal eine <select> mit Angular gefüllt hat, kennt das Phenomen, dass die Ids nicht im Value der Option stehen sondern über Angular später gesetzt werden sollen. Wenn man mit ng-model arbeitet ist das auch alles kein Problem. Nur wenn man das <select> klassisch über eine Form submiten möchte kommt es zu Problemen.

ng-options="item.id as item.name for item in items"

Was hilft ist das hier

ng-options="item.name for item in items track by item.id"

Damit wird nicht mehr der Index des Arrays verwendet sondern wirklich die Id aus dem Objekt.

User	annonyme	Date	2018-02-03 19:07
Tags	angularjs, bootstrap, css, cursor, hannes pries, html, pointer, role, tipp

User	annonyme	Date	2016-04-08 18:35
Tags	bbcode, codemirror, editor, hannes pries, html, javascript, textarea, xml

Hannes Pries - Web/Shopware/JavaScript-Developer BlogWeil es immer eine simple Lösung gibt!

Hannes Pries - Web/Shopware/JavaScript-Developer Blog
Weil es immer eine simple Lösung gibt!