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

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!