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

JavaScript: Detect scroll to bottom

Um einen einfachen kleinen Dialog zum Akzeptieren von AGBs/T&Cs/etc braucht man nur relativ wenig JavaScript Code und auch kein JQuery mehr.

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<style>
#reader {
max-height: 200px;
border: 1px solid lightgray;
border-radius: 3px;
overflow: auto;
padding: 0.25rem;
}

#page {
display: flex;
justify-content: center;
padding-top: 5rem;
}
</style>
</head>
<body><div id="page">

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Scroll to Accept</h5>
<p class="card-text">
<div id="reader">
Gott zum Gruße! Das feist Weichteile. Die geflissentlich
Begrüßungsgeld meucheln. Der töricht Lump grämen. Das bräsig Schürzenjäger.
Der grobschlächtig Edelmut. Der Kummerspeck anschwärzen der bierernst Lump.
Fatzke und Panzerkampfwagen flanieren pompös Schindluder. Die pomadig Bagage
foppen. Narr und Affenzahn schlampampen feist Quasselstrippe. Presssack und
Kuppelei picheln altbacken Kummerspeck. Die geflissentlich Luder frickeln.
Das Begrüßungsgeld schlampampen die gebeutelt Flegel. Habe die Ehre!
</div>
</p>
<button id="ok" class="btn btn-primary" disabled type="button">Accept</button>
</div>
</div>
<script>
document.getElementById('reader').addEventListener('scroll',
(e) => {
const element = e.target;
if(element.offsetHeight + element.scrollTop >= element.scrollHeight) {
document.getElementById('ok').removeAttribute('disabled');
}
}
, true)
</script>
</div>
</body>
</html>

PHP: mpdf vs dompdf

CSS war ja ansich schon immer ganz gut um auch damit Druckdokumente zu erstellen. Vor vielen Jahren mit FlyingSaucer und Java und heute auch mit PHP. Nun kam die Frage auf ob mpdf oder doch eher dompdf dafür geeignet wäre. Kurz.. an sich gibt es da kaum einen wirklichen Unterschied. Beide sollen ältere Bootstrap-Versionen unterstürzen. Bootstrap 3.3.x hat um 2015 auch schon für alles mögliche gereicht und man konnte damit genau so gut ansehnliche Ergebnisse erzielen wie mit 4.0 oder 5.0. Wenn man mit JavaScript unter React oder Vue unterwegs ist, gibt es natürlich viele Vorteile mit den neuen Versionen und intern hat sich viel getan, aber für rein statische Inhalte ist es für den Benutzer von Bootstrap an sich egal, ob er eine alte oder neue Version verwendet. Das Konzept ist gleich geblieben über die Jahre.

Zwischen mpdf und dompdf habe ich nur einen wirklich Unterschied ausmachen können der relavant sein könnte. dompdf kann mit <thead> und <tbody> bei Seitenumbrüchen innerhalb von Tables auf der neuen Seite den <thead> wiederholen. Gerade bei sehr großen Reports in Tabellenform ist das sehr wichtig und schon zu FlyingSaucer Zeiten eine der wichtigsten Funktionen, die alle brauchten.

Minimal Vue + Bootstrap Boilerplate

Für einfaches und schnelles Prototyping ohne viel Struktur oder Komponenten. Z. B. zum Testen von Logik oder REST-API Abfragen.

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Minimal Vue.js + Bootstrap 4 Boilerplate</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 class="text-center"></h1>
</div>
<script>
var app = new Vue({
el: '#app',
created: function () {

},
beforeDestroy: function () {

},
data: {
message: "Hello Web!"
},
methods: {

}
});
</script>
</body>
</html>

An sich für genau das wo für ich immer AngularJS verwendet habe. Werde ich hoffentlich demnächst für PWA erweitern.

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: Legacy-Plugin Service dekorieren

Gehen wir mal davon aus wir hätten noch ein Legacy-Plugin mit einer Bootstrap-php, die einen Service registriert, den wir dekorieren wollen. Über die services.xml geht so etwas nicht.

class HprTest extends Plugin{
public static function getSubscribedEvents(){
return [
'Enlight_Bootstrap_AfterInitResource_hpr_legacy.the_service' => 'decorateService',
];
}

public function decorateService()
{
$coreService = Shopware()->Container()->get('hpr_legacy.the_service');
$refl = new \ReflectionClass(get_class($coreService));

$field = $refl->getProperty('config');
$field->setAccessible(true);
$config = $field->getValue($coreService);

$service = new TheNewService($config);
Shopware()->Container()->set('hpr_legacy.the_service', $service;
}
}

Sehr sehr unschön.. aber es funktioniert so. Der Weg über die XML ist natürlich sehr viel schöner, gerade weil die Injection der Constructor Arguments vom ursprünglichen Service übernommen werden man nicht diese per Reflections erst einmal wieder aus dem ursprünglichen Service heraus gepult werden müssen.

Kurz und Knapp: Einkaufswelten

Was mich stört:

- sehr kleine Ansicht des TinyMCE und keine gute Code-Ansicht (wie Codemirror oder so)
- Bilder werden immer mit festen Pixelwerten skaliert
- Es kommen CSS-Klassen hinein die man nicht will
- IMG sind z.B. immer Block-Elemente und nicht inline wie man es erwarten würde und dann geht einfache "text-align:center;" nicht
- Das Handling von ausgeblendeten Elementen ist nicht wirklich gut
- Das Scaling-Verhalten der Banner lässt sich nicht konfigurieren
- Direkte Rahmenstyles für die Boxen wäre toll
- kein Undo
- Ein Grid wie in Bootstrap mit automatischer Anpassung an die Bildschirmbreiten fehlt, auch wenn die vorhandene Lösung schon ganz ok ist
- Im- und Export von Einkaufswelten kommt erst mit 5.3
- Am Ende muss man doch relativ oft an den HTML-Code und CSS-Klassen und so anpassen

Aber man muss am Ende doch nochmal sagen.. für mich ist es die Beste Lösung, die es momentan gibt und auch durchaus von Leuten bedienbar ist, die wenig mit HTML und WebDesign zu tun haben.

Grid-Pages in aoop

Während ich in den letzten 3 Jahren bei aoop immer mehr Framework-Charakter im Vordergrund gesehen habe und den CMS-Teil davon mehr oder weniger komplett vernachlässigt habe (bis auf die Integration von TinyMCE und Code-Mirror), habe ich jetzt mal wieder angefangen in die Richtung etwas zu tun und die ersten Änderungen sind schon aus dem Feature-Branch in den Master gewandert.

Seiten sind nun Grids mit Content-Modulen als Inhalt. Der Vorteil von so einem Grid ist, dass es responsive ist und so die Anpassung für Mobile-Devices sehr vereinfacht wird. Während in der Desktop-Ansicht man das Grid sieht wird bei der Unterschreitung einer gewissen Breite einfach alles untereinander angeordnet. Momentan verwende ich das Grid von Bootstrap, weil man dieses auch allein super in vorhandene Templates integrieren kann ohne Angst haben zu müssen, dass das Design oder Layout Schaden nimmt.

Der Editor nutzt auch das Grid um eine brauchbare Vorschau zu liefern.

Dieses neue Seiten-Model und der dazu gehörige Editor werden nie den Umfang und die Qualität der Shopping Worlds in Shopware. Ich überlege ein Modul zu schreiben, das ähnlich wie das Digital Publishing in Shopware repsonsive Banners ermöglicht, aber auch hier natürlich nicht in dem Umfang, sondern in einer einfachen und grundlegenden Version.

Bootstrap und sein Grid

Oft hat man ja eine vorhandene Homepage mit vorhandenen CSS und möchte nur Teile davon erneuern. Wenn man nun einfach Bootstrap hinzufügt ist es bestimmt so, dass das ganze Layout zerfallen wird.
Gerade das Grid ist aber etwas was man gerne zusätzlich zum vorhandenen CSS hätte.
Dafür braucht man aber nicht alles von Bootstrap und zum Glück bietet Bootstrap selbst an sich eine Version zu compilieren, die nur die gewünschten Komponenten enthält. Man kann sich also eine Version bauen, die nur das Grid und die Icons enthält.

http://getbootstrap.com/customize/

JavaScript Frameworks und ihre Verbreitung

Ich heute letztens über diesen Artikel auf diesen Blog-Eintrag über die Nutzung und Verbreitung von JavaScript-Frameworks gestolpert.

Da es ja eigentlich um Web Frontend-Tools geht fehlt mir dabei etwas eine Übersicht zu den CSS-Frameworks, da diese doch schon sehr oft verwendet werden. Bootstrap, Foundation und UIKit hätten mich dabei sehr interessiert. Ich würde jetzt spontan vermuten,dass Bootstrap deutlich vorne liegen würde.

Bei den JavaScript Frameworks bin ich aber der Meinung, dass z.B. Frameworks wie AngularJS und jQuery eher schlecht mit einander zu vergleichen sind. jQuery arbeite auf einem viel nähren Level am DOM und AngluarJS durch sein Templating und Databinding auf einem eher höheren Level angesiedelt ist. Wenn man viel mit dem DOM arbeitet ist jQuery natürlich sehr von Vorteil. Bei AngularJS muss man dann öfters auf eigene Direktiven zurück greifen.

Wenn man schnell Prototypen mit grundlegenden Funktionen und paar Dummy-Daten bauen will ist AngularJS aber sehr viel besser. Man muss meistens nur das HTML-Layout um die AngularJS eigenen Attribute ergänzen und hat dann schon nach wenigen Minuten gefüllte Listen und Selects. Gerade bei Listen und Selects spielt AngularJS seine Vorteile, dann mit ein ng-repeat oder ng-options ist in wenigen Sekunden zuschreiben, wärend das Erzeugen und Befüllen und Hinzufügen von Options und LIs sehr viel aufwendiger ist.
So hat man sehr viel schneller etwas wo man meistens dann am Ende nur noch die AJAX-Request ergänzen muss um richtige Daten anstelle der Dummy-Daten zu haben.

Wenn ich aber Klick-Koordinaten in einem DIV oder einem CANVAS berechnen möchte und mit der Metrik der Elemente arbeite, dann ist natürlich jQuery die erste Wahl.

Bei den Frameworks wird also einfach zu viel einfach zusammen geworfen und in Konkurrenz gesetzt was nie konkurrieren wollte oder sich eher noch perfekt ergänzen kann. Es gibt Artikel darüber wie AngularJS und React.js. Google und Facebook zusammen kann toll sein.

Bei den Module Bundlers kann ich nur zustimmen, dass die eine tolle Sache sind und ich bei meinem cJS auch RequireJS als Möglichkeit eingebaut Controller zu laden. Aber auch ist selbst benutze es irgendwie nie. Bei großen Anwendungen ist es bestimmt toll und eine Art JS-Class-Loader. Aber bei kleinen Anwendungen mit 6 Controllern ist das einfache einbinden irgendwie übersichtlicher.
Aber an sich sind die toll und man sollte sie viel öfter verwenden. Leider werden alle Controller am Anfang direkt instanziert. Ideal wäre es wenn der Controller erst geladen wird, wenn er das erste mal auch wirklich angesprochen wird. Also die Bindings auch erst erstellt werden, wenn diese das erste mal in Aktion kommen.
So ein Framework würde sicher viel Speicher sparen.

CSS Frameworks

In der letzten Zeit habe ich mit CSS-Frameworks zu tun gehabt. Bootstrap, Foundation und UIKit. Mit Bootstrap hatte ich ja schon etwas länger Kontakt. Foundation jetzt so 3 Wochen und UIKit 2 Tage. Bootstrap gefällt mir von der standard Optik aber immer noch am Besten. Bei UIKit gefallen mir die mitgelieferten Icons. Foundation macht was es soll, aber sieht mir an einigen Stellen doch zu sehr nach plain-HTML aus und die Dokumentation sagt mir am wenigsten von den Dreien zu.

Aber am Ende machen doch alle drei genau das Selbe und das auch sehr ähnliche Weise. Was ich mit dem einen hinbekomme, kann ich ohne große Probleme auch mit den anderen erledigen. Oft muss man nur die CSS-Class's austauschen.

Ob man nun soviele ähnliche Frameworks braucht lasse ich mal dahin gestellt und versuche erstmal für mich heraus zu finden, welches ich nun als primäres verwenden sollte.

Side-Projects und diese zu Ende bringen

Erstmal klingt es ja gar nicht so schwer, etwas was man angefangen hat zu Ende zu bringen. Bei kleineren Projekten geht es auch immer ganz gut. Aber gerade bei größeren Projekten braucht man auch die Motivation über längere Zeit. Oft beginnt man ein Projekt weil einen die Technik gerade sehr spannend und toll vorkommt. Wenn man nun längere Zeit daran arbeitet und bei Nebenprojekten kommen einfach immer mal längere Pausen hinzu, stolpert man schon wieder über die nächste Technologie mit der man gerne etwas bauen würde. Also selbst bei seinen Nebenprojekten darf man nicht jeden Hype folgen, weil man sonst nie fertig wird. Um Dinge auszutesten und neue Erfahrungen mit Technologie zu sammeln sind kleine Projekte, meiner Erfahrung nach einfach besser.

Aber selbst wenn man mit gewohnter Technologie arbeitet und auch gerade kein Hype da ist, dem man hinter laufen könnte, bekommt man manche Projekte nie zum Ende. Da würde ich zwischen 2 Sorten unterscheiden:

* Projekte, die einfach nicht weiter kommen. Hier kann es an der Technologie liegen, dass sie instabil ist oder einfach die falsche Wahl war. Denn nicht alles was neu ist funktioniert besser und bei manchen passt der eigene Stil und deren Philosophie einfach nicht zusammen, egal wie gut diese auch in der Theorie sein mag. Oder es stellt sich heraus dass das Projekt an sich in eine falsche Richtung geht oder am Anfang schon falsche Überlegungen und Annahmen getroffen wurden (Selbst wenn eine Idee, das "erst einmal drüber schlafen" überlebt kann sie sich immer noch als totaler Unsinn heraus stellen)

* Projekte die an sich fertig sind, aber wo man das Gefühl hat es würde einfach noch was elementares fehlen. Hier gilt Features allein machen noch keine Anwendung. Vielleicht ist die Anwendung zu komplex, schlecht zu bedienen oder die Features greifen nicht so perfekt in einander wie man es sich gedacht hat. Anders gesagt.. die Anwendung fühlt sich unrund an.

Während bei der ersten Sorte, die Lösung ist, es einfach sein zulassen, das Projekt von vorne zu beginnen oder einfach das nächste Projekt zu starten, besteht bei der zweiten Art ja noch Hoffnung. Hier sind meist kosmetische Änderungen die Lösung und oft hilft auch eine zweite Meinung. Ich hänge auch gerade bei so etwas. Es läuft alles perfekt, lässt sich sogar gut bedienen, aber irgendwas fehlt. Es sind nicht irgendwelche Features, wo ich sogar schon eine Idee hätte was man noch einbauen könnte (wäre mal was mit der Geolocation-API in JavaScript).

Es ist ein Image-Board was aber eher wie ein klassisches Internet-Forum strukturiert ist. Mit Benutzer-Konten, Sichtbarkeiten, etc. Man kann seine eigenen Unter-Boards erstellen, Freunde haben, daran die Sichtbarkeit einstellen aber auch anonyme Boards erstellen.. Bilder und Texte posten und nach Themen suchen. Für Smartphones mit wenig Leistung optimiert. An sich etwas wo drin ich mich auch wohl fühlen würde.
Aber ich weiß nicht warum es mir immer noch als nicht-fertig erscheint. Jede Funktion ist getestet und funktioniert. Die Optik scheint das Problem zu sein. Es ist das standard Bootstrap-Theme.
Es ist nicht individuell. Wenn ich rauf gucke fehlt die Wiedererkennung. Ein Logo ist da. Aber das ist klein und so.. ich will die Anwendung mit einem Blickstreifen und wissen dass es meine ist.

Ja.. Lösung? Doch mal versuchen ein eigenes Bootstrap-Theme zu basteln. Es scheint ja viele Seiten dafür zu geben. Leider funktionierten nicht alle und andere waren mir zu unübersichtlich. Ich hätter gerne eine direkt Vorschau.

Aber da schon mal alles läuft, habe ich sogar schon http://www.schootoi.net. Ich wollte es bis Ende Juni fertig bekommen und wenigstens im Firefox Marketplace eingestellt haben.
Aber dann ist das Ziel jetzt eben Ende Juli. Bis dahin sollte ich hoffentlich ein eigenes Bootstrap-Theme zusammen gebastelt haben. Zeit habe ich vielleicht dafür.

User	annonyme	Date	2021-10-08 13:50
Tags	bootstrap, css, dompdf, flying saucer, hannes pries, mpdf, pdf, php, print profile

User	annonyme	Date	2019-02-13 18:45
Tags	boilerplate, bootstrap, hannes pries, prototyping, pwa, vue

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

User	annonyme	Date	2015-06-29 19:53
Tags	bootstrap, ende, hannes pries, probleme, projekte, schootoi

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!